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Avant-propos 



Cette collection fournit des connaissances essentielles sur un sujet donne 
sans jamais s'eloigner de leur application pratique. Les volumes de la 
collection sont bases sur une structure identique : 

■ Les puces introduisent une enumeration ou des solutions alternatives. 
1 . La numeration accompagne chaque etape d'une technique. 



II s'agit d'informations supplementaires relatives au sujet 
traite. 

) 




Met I'accent sur un point important, souvent d'ordre technique, 
7 qu'il ne faut negliger a aucun prix. 



as v> Propose conseils et trues pratiques. 



Conventions typographiques 

Afin de faciliter la comprehension des techniques decrites, nous avons 
adopte les conventions typographiques suivantes : 

■ Gras : menu, commande, boite de dialogue, bouton, onglet. 

■ Italique : zone de texte, liste deroulante, case a cocher, bouton radio. 

■ Police baton : touche, instruction, listing, texte a saisir. 

■ S< : indique un retour ligne volontaire dfl aux contraintes de la mise en 
page. 
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Preface 



Ce livre s'adresse a tous les publics. Que vous soyez debutant, webmestre 
ou programmeur, vous tirerez profit de cet ouvrage en vous amusant. Si 
vous avez 1' intention de creer un site Internet mais que vous vous sentiez 
demuni, incapable, depasse, PHP & MySQL en ligne constitue le debut 
ideal de votre aventure. Les pages qui vont suivre sont issues de ma 
pratique quotidienne d'analyste-programmeur et de webmestre. J'ai veille 
a parsemer ce livre d'astuces et d'exemples complets avec des explica- 
tions claires et une evolution progressive. 

Pour cette deuxieme edition, nous abordons PHP 5, qui entame une vraie 
revolution dans la maniere d'apprehender le code et la grammaire. PHP 5 
garde cependant une compatibilite ascendante qui garde operationnelles 
des fonctions obsoletes. Les points saillants de cette revolution sont le 
renforcement de la programmation objet, l'arrivee d'une nouvelle base de 
donnees SQLite et un vrai espace pour le XML. 

Le langage PHP est un vrai continent, compose, pour la version 4, de plus 
de 2 700 fonctions et de 80 extensions. Au cours de notre exploration, 
vous apprendrez des methodes et maitriserez progressivement les outils 
dans le but de creer un site interactif. Vous etudierez done les principales 
fonctions et notions du langage PHP. A travers des exemples, vous verrez 
comment creer facilement vos applications. En douceur et sans vous 
encombrer de notions superflues, vous assemblerez ces applications 
simples pour realiser une application "complexe". 

Ce livre est fonde sur mon experience. En 1994, j'etais vendeur de video 
numerique dans une grande surface informatique (Surcouf) ; e'est la que 
j'ai decouvert l'lnternet. A cette epoque, il existait peu de sites en 
francais. J'ai d'ailleurs realise mon premier site en anglais. Apres avoir 
enrichi ce site et arpente longtemps l'lnternet, j'ai voulu aller plus loin. 
C'est la que j'ai decouvert le langage Perl, sous la forme d'un script 
capable de traiter des donnees de formulaire envoyees par e-mail. Par 
simple curiosite, j'ai achete un livre, puis deux... et j'ai ete happe par la 
programmation. Seul, j'ai done realise des algorithmes de plus en plus 
complexes et acquis des methodes. 
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Apres cinq ans de pratique, je suis entre en 1999 a FIUT de Marne-la- 
Vallee pour etudier d'autres methodes de programmation et aborder Java 
et le langage objet. A la sortie de l'universite, mon diplome en poche, j'ai 
integre Nexus Developpement, ou j'ai pratique le langage PHP a temps 
complet pour le Web et experiments les bonnes (et mauvaises) methodes 
de programmation. 

Pour restituer un savoir, il est necessaire de V experimenter, c'est pourquoi 
j'ai emprunte pour vous des chemins que je n'avais jamais foules 
auparavant. De ce fait, ce livre est utile pour des programmeurs chevronnes. 

Au long de cet ouvrage, j'ai eu a coeur de rester accessible a tous. Quels 
que soient votre age et vos connaissances, vous pourrez programmer. La 
complexite reside non pas dans le langage PHP — l'outil est simple — , 
mais dans la conception de votre programme, dans son architecture et sa 
richesse. 

Un langage est fait pour la communication hommes/hommes, hommes/ 
machines et machines/machines. La plus grande competence d'un 
analyste-programmeur reste sa capacite a concevoir, a communiquer et a 
adapter son outil. L'outil est au service d'une fonction. Les langages 
deviennent trop souvent des chapelles de specialistes, de savantes cons- 
tructions mentales qui perdent de vue leur fonction et brillent uniquement 
dans les yeux des experts. Periodiquement, des langages tombent dans 
l'oubli parce qu'ils ont oublie la vie. L'informatique, comme le droit ou 
la medecine, peut malheureusement devenir une affaire d' experts en 
jargon. Ainsi, certains specialistes sont a meme de manipuler un client 
pour le faire payer des prestations interminables. Le langage PHP est 
different. 

J'aimerais que ce langage soit enseigne a l'ecole car les eleves peuvent 
programmer facilement et obtenir des resultats immediats, ce qui les 
encourage a approfondir. Tout langage de programmation enseigne la 
rigueur et la structure. La programmation informatique ouvre sur les 
mathematiques, bien sur, par la logique, mais aussi sur la grammaire et la 
redaction, par son souci de precision et la necessite de communiquer 
convenablement. II est indispensable d'etre compris par l'internaute sur 
un site mais egalement par le collegue qui reprendra le programme 
derriere vous. 
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Je dedie ce livre a mon pere, Maurice, qui a toujours encourage mon gout 
d'apprendre, et a mon filleul cambodgien, Touch Ra, qui un jour, je 
Fespere, pourra lire cet ouvrage et s'amuser avec du code informatique, 
s'il le souhaite. 
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PHP. Encore un sigle comme Finformatique les affectionne. On fait souvent 
des plaisanteries sur leur signification. Pourtant, les inventeurs de langage, 
ces forgerons de la syntaxe, possedent aussi de l'humour, c'est pourquoi 
frequemment, surtout dans la communaute du Libre (ou Open Source), le 
nom du langage est fonde sur une plaisanterie pour inities (private joke). 
Ainsi, comme Java signifie cafe en argot americain, il faut croire que la 
cafetiere a fourni le carburant aux createurs de ce langage. PHP est d'abord 
le sigle de Personal Home Page. Rasmus Lerdorf, son concepteur, s'est 
souvenu des fonctions recursives et Fa baptise (PHP Hypertext processor). Si 
vous developpez le sigle, vous generez une boucle infinie, crainte des 
programmeurs. PHP signifie PHP Hypertext Processor Hypertext Processor 
Hypertext Processor. . . C'est une fonction "Vache qui rit", suivant la logique 
de cette boite de fromage celebre qui affiche une vache avec des boites 
comme boucles d'oreille affichant une vache avec des boites... Justement, 
les boucles sont les elements qui caracterisent un langage de programmation. 



Le langage PHP est ne en 1994 d'un programme en langage Perl ecrit par 
Rasmus Lerdorf pour analyser les visites de son CV en ligne. II reecrit 
F application en langage C puis ouvre son programme a la communaute du 
Libre. Ainsi, il pourra desormais compter sur Faide de nombreux 
developpeurs. Son application PHP fusionne avec un moteur de traitement 
de formulaires, FI, ce qui donne la version 2. Avec la version 3, les 
fonctions deviennent nombreuses et la popularite grandit. 



Le langage PHP a encore beaucoup evolue. Nous en sommes actuellement 
a PHP 6. Les usagers ne sont pas obliges de prendre le train a chaque 
avancee technique pour plusieurs raisons : 

■ De nombreux sites en production sont faits en PHP 3 ou PHP 4 et 
fonctionnent tres bien ; 




Reportez-vous au chapitre intitule Les clefs du PHP pour obtenir 
plus de details sur la fonction recursive et les boucles. 



1 .1 Naissance de ce langage 



1 .2 Evolution du langage 
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■ Les hebergeurs de sites proposent souvent une configuration PHP 4 ; 

■ Le langage objet demande un raisonnement plus elabore. 
Plusieurs raisons peuvent pousser a changer de version : 

■ Une plateforme ou framework passe a cette version et nous interesse ; 

■ Par defi et gout d'apprendre de nouvelles syntaxes ou cadres de 
travail . 

Reportez-vous au chapitre intitule Les frameworks ou cadriciels 
PHP pour obtenir plus de details sur le sujet. 



1 .3 I nte ret de ce langage 

PHP est libre, portable et facile a comprendre. C'est un langage pour tous. 
Ce n'est pas un langage esoterique destine uniquement aux profession- 
nels, avec un jargon incomprehensible. Certains langages dits complexes 
sont a la mode car leur complexite permet a des entreprises de passer 
beaucoup de temps sur des applications cher payees. Le langage PHP est 
suffisamment souple, robuste et rapide pour interesser les professionnels 
et sa richesse d'outils en fera, dans les annees qui viennent, le langage 
privilegie de toutes les entreprises. 

La liberie 

PHP est gratuit. Ainsi, la plupart des hebergeurs gratuits le proposent avec 
la base de donnees MySQL, gratuite elle aussi. Libre signifie egalement 
que toute personne peut Fenrichir, a condition d'en faire profiler tout le 
monde gracieusement. A Finterieur de la communaute du Libre, les 
licences declinent des droits d'auteur distincts. En effet, Libre ne signifie 
pas que tout est permis ni que tout est gratuit. 

Le langage PHP evolue constamment grace a une communaute de 200 
developpeurs environ. La documentation est continuellement mise a jour et 
des milliers de sites a travers le monde s'y consacrent en publiant des 
articles, des forums, des astuces ou en proposant des applications gratuites. 
Le langage PHP est porte par une vague de popularite qui ne cesse de croitre. 
Nous esperons a travers cet ouvrage participer modestement a son essor. 
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La communaute du logiciel libre (communaute 
du Libre) 

En 1969, les chercheurs ressentent le besoin de partager leurs 
travaux. lis creent done un reseau de machines. Le systeme d'exploi- 
tation Unix est invente la meme annee. II definit I'ordinateur comme un 
nceud de communication. Ce systeme fonctionne sur tout type de 
machine. Les deux inventions constituent les fondations d'lnternet. 
La cooperation engendree par ce reseau de chercheurs accelere le 
rythme des decouvertes et des inventions. 

Vers la fin des annees 70 se creent les grandes entreprises de logiciels. 
Le droit sur le logiciel apparait, posant que le logiciel appartient a celui 
qui I'a cree. L'auteur (individu ou societe) a le droit exclusif de le copier, 
de le distribuer et de vendre une licence a un utilisateur. La licence 
donne a I'utilisateur le droit d'installer le programme sur sa machine, de 
I'executer et d'en faire une copie de sauvegarde. 
Les editeurs de logiciels dissimulent le code source pour empecher 
quiconque de se servir de leurs connaissances et d'en faire un produit 
concurrent. Ainsi, une guerre des standards se declenche avec, a la 
clef, des profits extravagants. Dans cette course, seuls les plus gros 

survivent, ce qui nuit a la concurrence et rend le marche dependant de 
certains produits. 

Un chercheur qui partageait ses decouvertes, Richard Stallman, s'aper- 
coit que ses connaissances sont utilisees par des entreprises qui 
vendent leurs produits sans qu'il en recoive un quelconque retour. II 
imagine alors la GPL (General Public License). Cette licence accorde a 
I'utilisateur le droit de diffusion, d'utilisation et de modification. Une 
clause supplemental donne I'obligation d'utiliser la meme licence, que 
le logiciel soit modifie ou non. 

En 1991, le Finlandais Linus Thorvalds invente Linux, un systeme 
d'exploitation libre et gratuit. Le combat actuel contre le brevet logiciel a 
lieu dans ce contexte car son application signifierait, a terme, la mort du 
Libre. 

V ' 

La portability 

PHP peut etre execute sur n'importe quelle machine. Les programmes que 
vous creerez dans ce livre sont executables sur Unix, Linux, Windows ou 
Macintosh. Cette caracteristique vous affranchit des decisions prises par 
Microsoft ou Apple et securise l'avenir de votre application. 
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La facilite 

PHP peut etre aborde par tous. D'une part, il est gratuit et enrichi 
continuellement par de nombreux developpeurs (200 environ). D' autre 
part, il est simple de commencer a programmer en langage PHP. Tout cela 
joue un grand role dans sa popularite. Le fait qu'il soit soutenu par un 
grand nombre de developpeurs assure une evolution continuelle et 
favorise 1' integration des dernieres evolutions en matiere de langage 
informatique. 

Ce langage est simple. Vous commencez et obtenez immediatement un 
resultat. Cela permet a chacun d'apprendre a son rythme (comme vous le 
verrez a travers ce livre) et d'integrer la connaissance des fonctions et 
extensions au gre de ses envies. 

Un peu d'histoire 

Le langage PHP est issu principalement du langage Perl, il s'appuie done 
sur le type stri ng, ou chaine de caracteres. Le string en anglais est le fil 
d'un collier de perles. Dans le langage C qui est l'ancetre de la plupart des 
langages utilises actuellement, il n'existe pas de type string. Seuls 
existent les caracteres comme A ou b . . . Une phrase est alors un tableau de 
caracteres avec le premier caractere dans la premiere case et le chiffre 0 
dans la derniere case, pour terminer la chaine. Une string est un collier 
de caracteres, ce qui est assez eloigne de la maniere dont nous voyons les 
mots qui sont de vraies unites du langage. Le langage Perl a ete con§u 
pour simplifier les regies qui presidaient a l'ecriture de langages de 
programmation. Le principe etait de rapprocher l'ecriture du code du 
langage naturel, e'est-a-dire de la maniere dont l'humain s'exprime. Le 
langage Perl a donne naissance au langage PHP tandis que d'autres 
langages ont suivi d'autres routes. 

Le langage PHP, a partir de sa base Perl et C, a emprunte la conception 
orientee objet au langage Java (dans la version 3). Le principal objectif 
d'un langage objet est la reutilisation de briques de programmation 
autonomes et portables dans plusieurs programmes. Ce langage est derive 
du code C++, done du langage C. La demarche des concepteurs de 
Java procede de la meme constatation : le langage C++ est lourd a 
manipuler, il fallait done le simplifier et en securiser l'utilisation. Les 
concepteurs creent le langage Java sous l'egide de Sun Microsystems. Le 
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code Java n'a pas la souplesse du langage PHP, c'est pourquoi un morceau 
de programme en langage PHP qui prend quinze minutes a concevoir et a 
ecrire demandera plus d'une heure en langage Java. Les programmeurs 
Java disent du langage PHP que c'est un langage de "bidouille". On peut 
effectivement faire tout et n'importe quoi. Ce que les programmeurs en 
langage PHP prennent comme un compliment. Les deux langages tendent 
a se rapprocher, du moins, le langage PHP peut maintenant, grace a des 
bibliotheques, utiliser des classes Java. Le langage PHP est metisse de 
toutes ces cultures. 

Dans ce livre, nous n'aurons pas la place d'aborder V aspect programma- 
tion objet du langage PHP, le but de cet ouvrage etant de vous faire entrer 
directement dans le langage PHP pour resoudre n'importe quel probleme 
pose a un programmeur. Par contre, dans 1' articulation des fichiers PHP 
(1' architecture de 1' application), nous nous inspirerons de la programma- 
tion objet. II vous suffira ensuite d'apprendre la syntaxe et de pratiquer 
PHP pour maitriser cet aspect du langage. La version 5 du langage PHP 
developpera cet aspect. La caracteristique du langage PHP est de garder 
une compatibilite ascendante. Ainsi, certaines fonctions ont change de 
nom mais l'ancien nom est toujours operationnel. Tout cela fait du langage 
PHP un langage polymorphe. Nous le comparerons a une encyclopedic 
Pour chaque probleme pose, il existe plusieurs approches. Vous pouvez 
utiliser tout ce qui fonctionne a partir du moment ou vous gardez une 
coherence et une rigueur. N'oubliez pas en effet d'etre rigoureux car le 
langage PHP ne vous obligera pas a suivre des chemins balises. 

Reportez-vous au chapitre Mettre de I'ordre pour plus de 
details sur I'architecture, la rigueur et la clarte de votre pro- 
gramme. 

1 .4 Fonctionnement 

Le noyau PHP est un moteur en langage C localise sur le serveur. Quand 
un fichier est appele par un navigateur web, selon son extension (.htm, 
.php, .asp...), le serveur l'envoie directement au navigateur pour qu'il 
affiche la page ou le traite (dans le cas d'un fichier .php) en executant les 
commandes du langage PHP dont le resultat est renvoye sous forme de 
code HTML. 
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Des chiffres. 




Navigateur web 



▲ Figure 1.1 : Traitement d'un fichier PHP 



Le langage PHP est interprete dans sa version 3 et compile a la volee dans 
la version 4. Le langage compile est un peu plus rapide pour la machine. 



Langage C 

C est un langage de haut niveau, compile pour devenir 
executable sur une machine. Le langage naturel est celui que 
nous employons dans ce livre — du moins nous I'esperons. Le langage 
de haut niveau est un langage de programmation qui utilise des mots, le 
langage de bas niveau est quant a lui compose de 0 et de 1 , seul 
langage comprehensible par une machine. C emploie une syntaxe et 
des mots qui sont ensuite transformes par un compilateur en une suite 
de 0 et de 1 , selon le code de la machine et son systeme d'exploitation. 
II existe des compilateurs C pour Linux ou Windows. Ainsi, un pro- 
gramme compile sous Windows ne peut etre utilise sous Linux, et vice 
versa. 



1 .5 Des chiffres. 

En fevrier 2002, le serveur le plus repandu etait Apache, avec 65 % des 
serveurs, suivi par Microsoft a 25 %. Selon l'enquete d'E-Soft (http: / / 
www.securityspace.com), dans les serveurs Apache, le module le plus 
repandu etait le langage PHP avec 1 646 792 modules, c'est-a-dire qu'il 
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etait installe sur environ 45 % des serveurs Apache. Ces chiffres ne 
tiennent pas compte du cas ou le moteur PHP est installe sur un serveur 
Microsoft. 




▲ Figure 1.2: Taux de penetration du module PHP sur Apache 

En general, PHP est un langage de script, c'est-a-dire qu'il est inclus dans 
la page HTML. II peut aussi etre utilise pour envoyer des commandes 
systeme a la machine ou pour creer des logiciels comme ceux que vous 
avez sur votre PC, grace a l'outil PHP-GTK dont la version 0.5.0 vient de 
sortir. Elle etait tres attendue car c'est la premiere version stable. Elle 
ouvre de grandes perspectives pour les developpeurs. Les impatients l'ont 
appelee "Lundi commence samedi". 
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Nous commencerons par une revue sur le langage de description de page : 
HTML. Nous en evoquerons les principales balises. En fin d'ouvrage, 
vous trouverez toutes les references pour approfondir ce langage. Pour- 
quoi parler de HTML dans un chapitre intitule Ma premiere page PHP ? 
HTML est indispensable dans une page destinee a Internet, que 1' exten- 
sion de son nom de fichier soit .asp, .php ou .jsp... Une fois les balises 
HTML connues, nous aborderons le langage PHP. 

2.1 HTML 

L'ancetre de HTML est SGML (Standard Generalized Markup Language). 
De ce premier langage tres complexe sont issus HTML et XML. Ce 
metalangage a introduit pour la premiere fois les marqueurs ou balises. Le 
principe des balises est un concept interessant car tout document peut etre 
cree sur le plus simple des traitements de texte (Notepad sur Windows ou 
SimpleText sur Macintosh) et toutes les indications de mise en forme sont 
lisibles en clair dans un traitement de texte, tandis qu'elles sont interpreters 
par le navigateur internet sous forme de presentation multimedia. 




Metalangage 

Meta, en grec ancien, signifie "ce qui depasse ou englobe". 
Un metalangage est un langage autour du langage. HTML decrit 
le langage avec des balises ou marqueurs qui n'apparaissent pas dans 
I'affichage du texte mais agissent sur la presentation de ce dernier. 



Le langage HTML (Hypertext Markup Language) est accessible a tous. II 
est compose de balises c'est-a-dire de codes encadres de chevrons. Voyez 
la balise comme un ordre ponctuel envoye a l'executant, le navigateur, qui 
concerne la presentation et la structure du document. Ces balises peuvent 
etre solitaires ou accompagnees, c'est-a-dire composees d'une balise 
ouvrante et d'une balise fermante. Les regies de ce langage sont assez 
souples et les navigateurs internet programmes pour tolerer un certain 
nombre d'inexactitudes dans le code. Une fois que vous aurez appris les 
balises essentielles comme nous le ferons dans ce livre, vous pourrez 
approfondir ce langage qui, avec la version HTML 4, comprend une 
centaine de balises. 
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<BR> est une balise solitaire alors que <title>texte ici</title> est 
compose d'une balise ouvrante et d'une balise fermante, encadrant un 
texte qui sert de titre au document. 

HTML est done un langage de description de page materialise par des 
balises. II est interprete directement par le navigateur mais n'est en aucun 
cas un langage de programmation car il ne comporte pas de fonctions. 

Voici un exemple de page simplissime : 

Listing 2.1 : Page simplissime : simplissime.html 

<HTM LxH E ADxT I T LE>Ma Page</TITLEx/HEAD> 
<B0DY>Ma page tres perso</BODYx/HTML> 

Pour que l'accent dans le mot tres soit reconnu, il est necessaire d'ajouter 
au debut de la page, dans l'en-tete, <meta http-equi v="Content-Type" 
content="text/html ; charset=i so-8859-l">, pour expliquer au na- 
vigateur qui ne serait pas configure pour le francais, que ce sont des 
caracteres europeens de type iso-8859-1 dont le francais fait partie. 
Autrement, il suffira d'ecrire cette lettre accentuee sous la forme 
è. 

2.2 Le cheminement d'un apprenti 
webmestre 

Prenons une page parmi les millions de pages sur Internet, une page 
HTML sur un site quelconque. La page est statique, elle restera identique 
tant que personne n'y touchera. Evidemment, elle est frequentee par des 
visiteurs de passage. Elle sera enregistree dans les favoris (ou signets) du 
navigateur de son auteur et de quelques visiteurs. 

Un jour, l'auteur souhaite etoffer sa page puis ajouter d'autres pages avec 
des liens. Mais Internet est un flux d'informations constamment mises a 
jour, sa page restera momifiee et le temps rendra ses informations 
obsoletes. 

L'auteur essaie de trouver des informations interessantes a mettre a jour 
pour que sa page vive. II modifie sa page pour en changer l'apparence, ce 
qui se revele fastidieux, d'autant qu'il fait parfois de fausses manoeuvres 
et eborgne une balise ou deux, entrainant des problemes de presentation. 
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A son credit, nous pouvons avouer qu'il n'est pas facile de mettre a jour 
une page dans un traitement de texte, tant le contenu se trouve constelle 
de balises. II faut commencer par afficher le code source de votre page 
favorite. Pour cela, il suffit de choisir affichage/source dans le navigateur. 

L'auteur ressent bientot l'envie de creer un club. Ainsi, les membres 
pourront participer au contenu de son site. Mais il ne peut leur confier ses 
pages HTML pour qu'ils y ajoutent directement les informations. C'est la 
qu'il decouvre dans la FAQ de son hebergeur qu'il dispose d'un moteur 
PHP et d'une base de donnees MySQL. II lit qu'ainsi, les visiteurs peuvent 
participer a la vie du site en donnant des informations. Ces informations 
sont classees et stockees dans la base de donnees puis affichees grace au 
langage PHP. 

II pourrait creer le club des Bons Vivants, parce qu'il aime manger, boire 
et faire la fete. II pourrait ainsi organiser des repas, se faire de nouveaux 
amis et echanger recettes et adresses de bonnes caves dont les membres du 
club profiteraient. Mais si trop de monde connait la bonne adresse, les prix 
risquent de monter et le produit de se rarefier. II s'apprete done a creer une 
sorte de club Privilege. 

II regarde de plus pres le langage PHP, trouve un manuel, consulte des 
milliers de pages de documentation en ligne et commence a se decourager. 
Dans la FAQ, l'hebergeur lui dit pourtant que c'est simple. Mais par ou 
commencer ? II arrive finalement en ville et trouve le livre qui va lui ouvrir 
la porte de cet univers — nous esperons que pour vous ce sera celui-ci. 
Toute proportion gardee, c'est ainsi que l'aventure a debute pour nous. 

Vous avez maintenant compris l'interet du langage PHP et les raisons de 
sa popularite. 

2.3 Quelques notions de HTML 

Commencez par creer un fichier index.html. Toute page HTML est 
contenue dans les balises <HTMLx/HTML>. Les codes peuvent apparaitre 
indifferemment en capitales ou en bas de casse <htmlx/html>. Ensuite, 
la page est divisee en deux parties : l'en-tete et le corps. 

L'en-tete contient des elements invisibles, des meta-informations sur la 
page : son titre et le type de caracteres qu'elle emploie. 
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<HEADxTITLE>Mon ti tre</TITLExmeta http-equi v="Content-Type" 
content="text/html ; charset=iso-8859-l"x/HEAD> 

Ces elements sont obligatoires ou conseilles. D'autre elements, option- 
nels, peuvent apparaitre dans l'en-tete. 

En dessous, la partie affichee dans la fenetre du navigateur, le corps, est 
delimitee par les balises <B0DYx/B0DY>. 



f&jQf La page index est la page appelee automatiquement dans un 
repertoire si aucun fichier n'est specifie. Ainsi, I'adresse http:// 
www.pourpre.com est en realite I'abreviation de http://www.pourpre- 
.com/index.htm, index.html, default.htm, default.html ou index.php..., 
c'est-a-dire que I'URL appelle le fichier index.htm par exemple, dans le 
repertoire htdocs ou www du serveur pourpre.com. Ces deux noms de 
repertoire peuvent qualifier le repertoire public internet ou toute requete 
exterieure vers le serveur sera dirigee. II est conseille de mettre ce 
fichier dans tout repertoire. 



Les elements qui stracturent un document sont les paragraphes, avec les 
balises <P> et </P>. Pour une raison de compatibilite descendante, la 
balise <P> a la fin ou au debut d'un paragraphe suffit a creer un nouveau 
paragraphe, sans la balise de fin. La balise <P> peut comporter les 
attributs du paragraphe. Tout le texte insere entre les balises 
<p al ign="l eft"> et </p> sera aligne a gauche. Notre but n'est pas de 
presenter un panorama des balises HTML mais de vous fournir les balises 
essentielles pour composer une belle page. Ainsi, vous rencontrez aussi 
la balise <Pxdiv al ign="center"x/divx/P> ou <center> 
</center>. Les alignements de paragraphes sont caracterises par les 
attributs "left" pour gauche, "right" pour droite et "center" pour 
centre. HTML est polymorphe. A chacun de choisir ensuite la syntaxe qui 
convient le mieux ou celle que son logiciel de creation de page lui 
propose. 




La page index ou default 
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les espaces HTML 

Les espaces ne sont pas significatifs. Ainsi, un double 
espace n'affichera en realite qu'un espace. Vous pouvez inclure 
des espaces insecables avant un point d'interrogation par exemple, 
pour qu'il ne soit pas isole sur une autre ligne. Ce code est &nbsp ; . N'en 
abusez pas, certains logiciels en raffolent. 



Quant aux polices de caracteres, vous pouvez les caracteriser avec la 
balise <fontx/font>. Les attributs sont color, face, et size. Comme 
dans l'exemple ci-dessous : 



<font size="3" face="Arial, Helvetica, sans-serif" col or="#FF6633"> 

size peut etre une valeur absolue comme 1,2,3... ou une valeur relative 
+1, +2 ou -1,-2. La valeur relative attribuera une valeur au-dessus ou en 
dessous de la taille de la police du paragraphe. 

face proposera des noms de police. Si cet attribut comprend plusieurs 
polices, le navigateur cherchera la premiere. Si elle est disponible dans 
son systeme, il l'utilisera, sinon il cherchera la seconde. Dans le cas ou 
aucune police proposee n'est disponible, il utilise une police par defaut. 



Les polices propres a Macintosh 

Dans la liste des polices affichees par I'attribut face, indiquez 
au moins une police de caractere specifique au Macintosh, 
geneva par exemple. 



col or peut recevoir un attribut de couleur par nom ou valeur, par exemple 
bl ue ou #0000FF. Tous deux sont synonymes ; la premiere valeur est un 
nom, la seconde est le code hexadecimal qui lui correspond dans la 
gamme. Cette valeur est composee des codes RVB (ou RGB en anglais, 
c'est-a-dire Rouge- Vert-Bleu) de la couleur choisie. 
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Les valeurs hexadecimales 

Nous avons I'habitude de compter par dix. Nous comptons 
de 0 a 9 puis a 1 0, revenons a 0 en ajoutant une unite de dizaine. 
II s'agit d'une base 10. Les Celtes comptaient par vingt, c'est pourquoi 
les nombres quatre-vingt ou soixante-dix ont subsiste en francais, 
excepte en Suisse et en Belgique. Le compte hexadecimal utilise une 
unite de 16. Comme nous ne possedons pas de chiffres au-dela du 9, 
il utilise des lettres. (0..9 puis A, B, C, D, E, F pour les valeurs 10, 11 , 12, 
13, 14, 15. Ainsi le nombre 9889598 devient 96E73E et permet de 
gagner une case memoire. Ce systeme permet d'utiliser seize millions 
de couleurs (256 3 ) avec seulement six caracteres.) 



La couleur sert egalement a caracteriser le fond de la page ou celui du 
tableau. 

Ainsi, dans la balise <B0DY BGC0L0R="#FFFFFF">, la couleur blanche est 
attribuee au fond de page. Elle est aussi la couleur par defaut. Si vous 
Fomettez, vous obtiendrez un fond blanc ou noir selon le navigateur, une 
police noire, des liens hypertextes en bleu... 



N'oubliez pas le signe diese 

Le signe diese precede tout code de couleur, comme dans 
#FFFFFF. 



Les paragraphes comportent parfois des titres. Du plus grand au plus petit, 
vous avez les balises <H1>, <H4> avec leur balise de fermeture. 

Le paragraphe peut inclure des listes numerotees. La balise qui caracterise 
une liste numerotee est <0Lx/0L>. Chaque ligne, a l'interieur, est inseree 
dans un <LIx/LI>. Ainsi, chaque ligne sera automatiquement numerotee. 

<ULx/UL> caracterise une liste a puces. Ces balises de listes permettent 
aussi d'ajouter un retrait a la ligne ou au paragraphe, en omettant les 
<LIx/LI>. 
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Listes - Netscape 






Fehier Editton Afflchage Alter Communfcator ? 


€ tf -a a 

i| Precedent Recharger Accueil Rechercher 


V 

Guide 


* SSI 

Imprimer 


„t Signets ,4 Adresse:|l27.0.0.1/Clubbonsvivants/essai/listes.html t IO 


Infos connexes 


| @) Internet |§ Nouveautes jj Sites interessa § Membres 


[jB] Connexions 


§] Marche 



Une liste a puce(<ULxLI>) : Itineraire numerote (<OLxLI>) : 
Quelques persomiages celebres Pour aller de Paris a Auxerre. il faut : 



Toutou 

Medor 

Jappy 

Milou 

Bibiche 

Rex 



1 . Prendre le bus 

2. Prendre le metro 

3 . Prendre une douche 

4. Prendre les vessies pour des 
lanternes 



Liste sans puces ni nurneros (<OL> sans <LI>) : 
Qu'est-ce qu'un dahut ? 

C'est une bete qui vit dans les montagnes et qui a deux partes plus 
courtes d'un cote que de l'autre ..." 



£a se chasse ? 



Document: charge 



v& ^ \t- 



Figure 2.1 : Liste a puces, liste numerotee, liste sans balise <LI> 



Les images 

Les principaux formats du Web sont GIF et JPEG. La compression GIF 
est interessante si votre image contient des aplats de couleur, un logo par 
exemple, la compression JPEG est plus performante sur une photo qui 
comprend de nombreuses nuances. La compression a pour effet d'alleger 
le poids d'une image en kilooctets, done de l'afficher plus vite dans la 
fenetre du navigateur. 

Le format GIF permet egalement de selectionner une couleur pour la 
rendre transparente, ce qui aura pour vertu de faire apparaitre la couleur 
de fond de page en lieu et place de la couleur choisie. Si par exemple, vous 
avez un logo rond, il est dommage de voir ce logo apparaitre dans un carre 
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blanc. En rendant son fond transparent, cette image apparaitra ronde, 
posee sur le fond de page, quelle que soit sa couleur. 

La balise pour integrer une image dans une page est <img src="images/ 
image.gif" width="100" hei ght= " 100" alt="liste des candi- 
dats" al ign = "bottom">. Pour que l'image s'affiche plus vite, il est 
preferable d'ajouter la largeur width et la hauteur height. L'image est 
souvent utilisee comme lien de navigation, il est done conseille d'y ajouter 
l'attribut alt qui affichera un texte des que le curseur de la souris la 
survolera. Ce texte explique la destination du lien, ou le cas echeant, 
attribue une legende a l'image. L'attribut align place le texte qui 
l'accompagne. Dans le cas de bottom, le texte se place en bas de l'image, 
middle place le texte au milieu et top en haut de l'image. 



^ II pleut - Netscape 



Fthier Edtbn Affchage Alter Communteator ? 



4' a a a. ** 

Precedent Suivant Recharger Accueil Rechercher Guide Imprimer 



■^'Signets Adresse:[27.0.0.1/Clubbonsvivants/essai/images.htrnl -r HP* Infos connexes 
§1 Internet @ Nouveautes §1 Sites interessa §) Membres §) Connexions §1 Marche 



,«, top 

" ^g^r^ ~ middle 



Document: charge 1^ =1 ^ 



A Figure 2.2 : Bottom, middle, top 

Les liens 

Vous avez une page, il faut maintenant la relier a d'autres pages. Pour cela, 
vous utilisez les liens hypertextes. 

Le lien se fait par l'intermediaire d'un mot ou d'une image, vers une autre 
page ou un autre paragraphe de la meme page : 
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<A HREF="autrepage.htm"> mon autre page</A> 
<A HREF="autrepage.htm"> 

<img src="images/image.gif" width="100" height="100" 
alt="liste des candidats" al ign="bottom"x/A> 



L'attribut border dans 1'image 

II est preferable de toujours ajouter l'attribut border="0" dans 
la balise d'insertion d'image pour que I'image ne soit pas 
encadree par un lisere parasite de la couleur du lien. 



Le lien vers un paragraphe a l'interieur d'une page utilise la meme 
syntaxe. Ce type de lien est pratique quand une page est longue. Une serie 
de liens, en haut de la page vers les differentes parties de la page, facilite 
la navigation : 

<A HREF="#concl usion">concl usion </A> 

Dans cette partie de la page, vous inscrirez l'ancrage <A 
NAME="#conclusion">quelques mots</A>. L'URL complete, pour par- 
venir directement a ce paragraphe a partir d'une autre page sera : 

<A HREF="autrepage.htm#concl usion">Concl usion du colloque</A> 

Un autre parametre de lien, target, affiche le resultat du lien dans une 
fenetre choisie. Le parametre le plus couramment utilise est _bl an k qui 
ouvre une nouvelle fenetre dans le navigateur pour afficher la page cible 
du lien. Cette fenetre permet de garder presente la page appelante : 

<A HREF="parcours . htm" target="_bl ank">Comment s'y rendre</A> 

Le dernier type de lien est celui qui englobe une adresse e-mail : 

<A HREF="mailto:moi@moi . com">moi@moi .com</A> 

Ce lien clique ouvrira le logiciel de messagerie par defaut avec, comme 
destinataire, 1' adresse e-mail en question. 
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Formater un courriel dans le lien de I'adresse e-mail 

' Vous pouvez ajouter divers elements dans le message en 
incluant un point d'interrogation a la fin de I'adresse e-mail et une 
esperluette pour separer les champs. 

<A HREF="mailto:moi@moi .com?subject=test&Cc=toi@moi 

.com&Body=Salut"> 

ecri re</A> 



La taille des donnees y est limitee. 



La couleur des liens sera determinee dans la balise <B0DY> par les 
parametres 1 i nk, vl i nk, al i nk suivi de la couleur. link donne la couleur 
du lien, v 1 ink la couleur du lien pour un site deja visite et al i nk (active 
link) la couleur lorsque vous cliquez dessus. 



<body bgcol or="#FFFFFF" text="#000000" 1 ink="#0000FF" 
vl i nk="#993399" al i nk="#FF0000"> 



Les tableaux 

Les tableaux sont indispensables pour structurer une page. La plupart du 
temps, ils sont invisibles mais permettent de placer les images et le texte 
avec plus de precision dans la surface de la page. 

Le tableau est contenu dans les balises <TABLEx/TABLE>. II est forme de 
rangs et de colonnes. 

Les rangs sont crees a l'aide des balises <TR> et les colonnes, avec des 
balises <TD> : 

<TABLE><TR><TD></TD»<TDx/TDx/TR> </TABLE> 

Ici, vous avez une table d'un rang et de deux colonnes. Sur un des rangs, 
vous pouvez fusionner les deux colonnes. Pour cela, utilisez un attribut 
<TD C0LSPAN="2"> : 

<TABLE><TR><TDx/TD><TD></TDx/TR> 
<TRxTD C0LSPAN="2"x/TD</TR> 
</TABLE>. 
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Vous pouvez aussi faire la transformation sur deux cellules dans une 
meme colonne, sur deux lignes adjacentes : 

<TABLExTRxTD R0WSPAN="2"x/TD><TDx/TDx/TR> 

<TRxTDx/TDx/TR> 

</TABLE> 

Pour voir l'effet de votre code dans la fenetre du navigateur, nous vous 
conseillons d'ajouter border^" 1" dans la balise table <TABLE bor- 
der "1">, le temps de faire le test. Ainsi, vous marquerez les limites de 
vos cellules de tableau avec une bordure. Exercez-vous. Tapez du code 
dans un traitement de texte comme Notepad (ou Bloc-notes) dans les 
accessoires de Windows ou Simpletext, dans le menu Pomme du 
Macintosh. Ensuite, nommez-le index.htm ou index.html et ouvrez-le dans 
votre navigateur. Vous touchez a la dimension magique de simples mots 
qui creent instantanement un univers visuel a l'ecran. 

Pour placer des elements dans votre page au moyen d'un tableau invisible, 
il faut en calibrer la largeur. La taille de chaque colonne devra etre 
precisee car autrement, le tableau adaptera chaque colonne au contenu de 
ses cellules, reduisant a rien les colonnes vides. Une colonne vide devra 
contenir un espace insecable   pour que la taille puisse etre prise en 
compte. La taille est declaree soit par un nombre de pixels, soit par un 
pourcentage. L'interet d'utiliser le pourcentage, au moins pour le tableau 
complet, est que l'ecran de vos visiteurs peut afficher des definitions 
differentes (640 pixels par 480, 1024 x 768 ou 1280 x 1024) et qu'une 
page stracturee par un tableau determine en pourcentage s' adaptera a 
chaque configuration. Le pourcentage est une valeur relative a la taille 
tandis que le pixel est une valeur absolue. 

<TABLE width="95%">. Ici, le tableau occupera tout l'ecran ou presque, 
quelle que soit la taille de l'ecran. Vous pouvez aussi colorer le fond de ce 
tableau avec bgcol or="#FF00CC" en le positionnant dans la balise tabl e, 
tr ou td, selon la surface que vous souhaitez colorer. 
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▲ Figure 2.3 : Tableau invisible avec fond 
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▲ Figure 2.4: Tableau visible avec bordures 
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Lesformulaires 

Pour que les visiteurs participent a votre site, il faut mettre a leur 
disposition un formulaire qui vous permette de recevoir une information 
structuree de leur part. Les visiteurs rempliront alors des champs deja 
calibres. 

Les champs du formulaire seront contenus dans les balises <F0RM> et 
</F0RM>. La balise <F0RM> ouvre le formulaire et contient obligatoire- 
ment les attributs action et method. 

L'attribut acti on donne l'adresse internet (URL) du script qui traitera les 
donnees. L'attribut method indique la maniere dont les donnees seront 
envoyees au programme. Avec la methode GET, les parametres renseignes 
dans chaque champ du formulaire sont envoyes dans l'URL : 

http : //www.monsi te. com/trai tement_f oraml ai re . php?ti tre=Le 
+l_ai t%2C+une+sacr%E9e+vacheri e+%3F&auteur=Dr+Ni col as+Le+Berre 

Une variable se cree automatiquement pour chaque champ delimite par 
une esperluette, cette URL equivaut a la creation de variables avec des 
valeurs en haut du fichier appele : 

$titre='le Lait, une sacree vacherie' ; 
$auteur='Dr Nicolas Le Berre'; 

Les variables seront abordees dans le chapitre 3. 



L'URL sera codee, ainsi le caractere litteral ? est remplace par 3F pour 
eviter d'etre confondu avec l'operateur de transport des donnees ?. De 
meme, e est remplace par son code hexadecimal E9. lis sont precedes d'un 
signe d'echappement % qui indique au moteur PHP qu'il s'agit de code. Le 
signe + marque les espaces. Pour coder ce type de chaine dans un lien et 
non plus dans un formulaire, il vous suffit d'utiliser la fonction url en- 
code (). Ensuite, les donnees n'ont pas besoin de fonction car le moteur 
PHP les decode automatiquement. 
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L'autre methode est POST qui est plus propre et peut envoyer des donnees 
dont la taille va jusqu'a 64 Ko. Ces donnees ne sont pas visibles. 



L'attribut name de chaque champ 

Le nom de chaque champ baptise la variable PHP et sa 
valeur est attribute a la variable ainsi creee. Le nom de chaque 
champ doit done etre coherent avec vos propres conventions de 
nommage des variables. 




Tab. 2.1 : Les champs INPUT 



Champ 


Caracteristique 


Attributs 


text 


Pour entrer une information de 
type texte 


size : longueur du champ affiche 
maxlength : nombre maximal de 
caracteres entres val ue : valeur 
par defaut 


radio 


Pour selectionner une option, a 
I'exclusion des autres qui portent 
le meme nom 


Les differentes options ont le 
meme nom (name) mais pas la 
meme valeur (val ue). checked 

IIIUILjUC Id UdoC LUUIICG (Jdl 

defaut. 


checkbox 


Pour selectionner une ou 
plusieurs options 


L'attribut name des cases est 
different pour chacune. Dans 
I'hypothese de cases multiples, 
les cases portent le meme nom. 
checked indique la case cochee 
par defaut. 


hidden 


Pourtransmettre une information 
qui ne sera pas modifiee par 
I'internaute, ni affichee 


Comme pour un champ de texte, 
il comporte les attributs name et 
val ue. 


submit 


Pourtransmettre les donnees 
d'un formulaire a un programme 


Affiche un bouton d'envoi de 
formulaire. 


reset 


Pour vider les valeurs inscrites 
dans le formulaire 


Affiche un bouton pour effacer le 
contenu du formulaire. 


password 


Pour entrer un mot de passe 


Affiche le mot de passe sous 
forme d'etoiles. 
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Tab. 2.1 : Les champs INPUT 


Champ 


Caracteristique 


Attributs 


file 


Pour envoyer un fichier dans le 
formulaire ou deposer un fichier 
dans le repertoire d'un serveur 


Le bouton parcouri r lui sera 
adjoint par le navigateur. Ainsi 
I'internaute ira chercher le fichier 
surson disque dur. 


image 


Pour soumettre un formulaire 
avec une image au lieu d'un 
bouton 


Remplace avantageusement le 
bouton submit par une image. 



Tab. 2.2 : Les autres champs 


Champ 


Caracteristique 


Attributs 


textarea 


Pour entrer un texte sur 

plusieurs lignes 

Le texte inscrit entre les balises 


rows : hauteur de la fenetre col s : 
largeur de la colonne 
wrap : decoupage des lignes 




<textarea> et </textarea> 
est le texte affiche par defaut. 


virtual Le texte est 
(conseille) affiche sous 

forme de lignes 
mais envoye en 
une seule ligne. 


select 


Pour selectionner une ou 
plusieurs options dans une 
liste deroulante 


mul ti pi e permet de selectionner 
plusieurs options, size permet 
d'afficher une a plusieurs options 
dans la fenetre. 


option (a 
I'interieur 




selected indique I'option 
selectionnee par defaut. 



des balises 
sel ect) 



Les cadres ou frames 

Les cadres sont des fenetres incorporees dans la fenetre principale. Vous creez 
d'abord votre page d'accueil contenant des cadres qui appellent d'autres pages. 
Ainsi, vous pouvez afficher un haut de page avec une banniere, un logo ou un 
titre puis un menu de liens a gauche pour naviguer sur le site et enfin une 
fenetre qui affiche le contenu des pages appelees par un clic. 
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L'interet de ce procede est d'avoir un seul fichier d'en-tete et un seul 
fichier de menu, ce qui simplifie la mise a jour puisque toutes les pages 
appellent le meme en-tete et le meme menu. L' inconvenient, c'est que 
tous les navigateurs web n'affichent pas la page de la meme facon, ainsi 
certaines pages presentent des bords rognes par le cadre. D' autre part, les 
moteurs de recherche trouveront une premiere page vide qui sert unique- 
ment de structure pour afficher d'autres pages... 

Nous preferons utiliser des tableaux. II suffit, pour cela, de concevoir un 
gabarit de page pour la creation des pages du site. Vous enregistrez cette 
page type sous un autre nom (Fichier/Enregistrer sous) pour creer un 
nouveau fichier et en modifiez le contenu pour produire une nouvelle 
page. Le menu peut etre elabore a partir d'une table de la base de donnees. 
La structure de la page, elle, est calquee sur un tableau invisible qui aide 
a disposer les elements de la page. 

Procedure a suivre 

Creez votre page d'accueil que vous appellerez index.htm ou index.html. 
Contentez-vous de construire vos cadres et d'appeler les vrais pages. 
Procedez ainsi : 



Listing 2.2 : Des cadres : cadres.html avec repertoire cadres 


<html> 




<head> 




<title>Des cadres</title> 




<meta http-equi v="Content-Type" content="text/html ; 




charset=iso-8859-l"> 




</head> 




<frameset rows="80,*" cols="136,*" f rameborder="NO" 




border="0" f ramespaci ng="0"> 




<frame name="cornerFrame" scroll ing="N0" noresize src= "logo. html " > 


<frame name="topFrame" scroll ing="N0" noresize src="titre 


, html " > 


<frame name=" left Frame" scrol 1 i ng="N0" noresize src="menu 


,html "> 


<frame name="mai nFrame" src="page.html "> 




</f rameset> 




<noframesxbody bgcol or="#FFFFFF" text="#000000"> 




votre navigateur n'accepte pas les cadres. 




</bodyx/nof rames> 




</html> 





Vous disposez vos cadres dans la page en les dimensionnant. Vous avez 
deux unites de mesure : le pixel ou le pourcentage. Le pourcentage est 
preferable car vous ne connaissez pas les parametres d'affichage des 
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machines des internautes. L'etoile permet aussi d'indiquer que la taille 
dependra du contenu. 

Dans l'exemple, deux cadres sont crees a l'horizontale. Le premier 
possede une hauteur de 80 pixels et le second s'adaptera a son contenu 
(etoile). Dans le premier, nous avons place deux cadres : un pour afficher 
le logo du site et un pour afficher une banniere. A l'interieur du deuxieme 
cadre horizontal, deux nouveaux cadres sont dessines a la verticale. Le 
premier, menu, est large de 136 pixels, le second, page, s'adapte a la 
dimension restante. 

L'attribut NORESIZE empeche le navigateur de changer la dimension du 
cadre et le parametre SCROLLING caracterise la glissiere, en bas ou a droite, 
sur laquelle une jauge coulisse pour reveler les parties cachees du cadre. 

Chaque cadre a pour parametres un nom donne par l'attribut NAME et 
l'URL de la page appelee par l'attribut SRC (abrege de source). 

Les balises <nof ramesx/nof rames> renferment un code qui s'affichera 
si le navigateur ne reconnait pas les cadres, ce qui est de plus en plus rare. 



U« EdBon Mlttitge Afcr Commutator ? 

PMtfetort »*■■>)<■■ AccwM n*ftft*»» <ktt» tlnl 
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- 


* '. 

1 !mm |n 


9**mM» 9 »M mtW 9 »*»"*'»» 9 COMWBM 9 ****** 
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LE 






MENU 













▲ Figure 2.5: Resulted du code ci-dessus 
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Les pages appelees sont creees, comme n'importe quelle page HTML : 

<html> 
<head> 

<title>des cadres</title> 

<meta http-equi v="Content-Type" content="text/html ; 
charset=iso-8859-l"> 

</head> 

<body bgcolor="#663366" text="#000000"> 

<hl al ign="center"xfont face="Arial, Helvetica, sans-serif" 
color="#FFFFFF">LE 
HENU</fontx/hl> 
</body> 
</html> 

Remarquez le lien qui contient Fattribut TARGET (pour cible), avec le nom 
du cadre qui affiche le contenu, en l'occurrence le cadre page. Cette 
derniere caracteristique afFichera la page demandee par le visiteur dans le 
cadre page, c'est-a-dire le cadre de droite. 

2.4 Les outils 

Bien qu'il soit possible, comme aux temps heroiques des debuts dTnter- 
net, de creer vos applications avec un petit traitement de texte reduit a ses 
plus simples fonctions comme Notepad, vous disposez maintenant 
d' outils confortables dont certains sont gratuits. Ne vous en privez pas. 

Dans cette partie, nous repertorions ce dont vous avez besoin pour 
l'ecriture de vos applications, leurs tests et leur publication sur le Web. 

Les logiciels d'edition de code PHP 

Pour ecrire vos pages HTML, vous pouvez employer un traitement de 
texte — le Web utilise surtout des fichiers texte. En langage PHP, si vos 
fichiers peuvent etre simples au depart, vous vous apercevrez vite qu'ils 
deviendront illisibles en se complexifiant. Or les logiciels d'edition vont 
colorer votre syntaxe et inserer des retraits de ligne fort utiles pour vous 
reperer dans le code. Nous vous conseillons d'en acquerir un. 

PHP Coder est un excellent logiciel gratuit. II est en anglais et possede 
toutes les fonctions pour un bon confort de codage. II colore la syntaxe, 
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comprend un interpreteur pour tester votre programme et permet d'annu- 
ler vos frappes sur de nombreux niveaux. 

Cette derniere caracteristique nous a souvent permis de sauver du code. 
Ainsi, lorsque vous avez tape des lignes que vous avez ensuite modifiees 
plusieurs fois. A une etape de votre application, vous vous apercevez que 
vous etes en train de vous egarer et qu'il est plus sain de revenir au debut 
pour prendre un autre chemin. Ce logiciel vous permet de revenir dans le 
passe et de faire un couper/copier de cet ancien code pour l'inserer ensuite 
dans le code present. 

Si vous preferez un logiciel en francais, l'excellent HomeSite possede des 
fonctions identiques et bien d'autres. II est livre seul ou avec un autre 
logiciel qui simplifie votre vie de webmestre et de createur de pages 
internet, Dreamweaver de Macromedia. Pour Macintosh ou Linux, 
d'autres logiciels sont a votre disposition. 




En annexe de cet ouvrage, vous trouverez une liste d'autres 
... logiciels. 



Htm fdton AKfwchcr Outfc Profit Option Hvgjnjri MTictugr Mr 

o <? ^ C a ■ ? - * A " • ■ ' s m i 



</90t!PT> 
</h*ad> 
<body> 

VwuilUt uuttunc choisir 1« .... 
pour y ucMti. Vous pour re i ainsi 
voir* la supprimar *v*ntu*ll*Mnt. 



porterei dans le club et 1* awe da passe 
d'autres nentores el modifier votre profil. 



r 



If (Hutfc—2) I 

adM "<pxfont color~\*»mOOO\">Votre aiias existe M;i dans It base de 
donnea*. Soil vous etes deja aeabre et vous aver <a firef-l "cubl i .pnp\ ">cabl votre 
mot de p+ss*</*>. Soil il s'agit d'une simple coincidence, dans leguel ces, entres 
<a Jir»r>\"«\" 

onClic*«\"ouvrir_vasistasf 'oubJi.pnp', 'vasistas', *»enubar-flo, scrollbars-no, statusbar 
-no, vidth-J0O,haigftt-JO0*M">oubli« votre met da pa*»e</A>. . . </tontx/p>"; 



) 



i "<br>Jannonca <br>*; 



<fora actioB-"trait*fflant_id.php" ■athod-'post" onSubBut-" return verif_forBulair«<)"> 
<'.abl* cfllapd-ir.g -'a* cellpaddilVJ-T ' border-"I'> 



▲ Figure 2.6 : HomeSite 4 
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EasyPHP 

Vous disposez de plusieurs installations gratuites, comme EasyPHP ou 
PHPTriad, qui incluent un serveur web Apache accompagne du module 
PHP et de la base de donnees MySQL pour votre machine personnelle sous 
Windows. L'interet de Finstaller sur votre machine reside dans le cout et 
la facilite a tester vos programmes. D'autre part, vous prendrez le temps 
de concevoir V architecture de votre programme avant de le mettre en 
ligne, pret a l'emploi. A moins que vous n'ayez une connexion ADSL ou 
cablee, vous avez souscrit un forfait ou utilise un fournisseur gratuit dont 
le temps de connexion vous est facture. Vous avez done interet a employer 
votre connexion a bon escient. Les tests et le debogage de vos program- 
mes peuvent prendre beaucoup de temps, alors autant le faire sur votre 
machine, hors connexion. Pour mettre ensuite vos pages en ligne et les 
rendre visibles au public, vous aurez simplement a modifier quelques 
parametres dans un fichier commun a toutes vos applications. 



^ [EasyPHP] - Administration - Netscape 




Un|fx' 


Fichier Edition Affichage Alter Communicator ? 


€ a & a a 

Precedent Recharger Accueil Rechercher Guide 


Imprimer 


151 

Secunte /^Ml 


i\ >rf'Signets & Adresse:|http://127.Q.0.1/homey| 


-H 


Jl" Infos connexes 


' [§) Internet §j] Nouveatites 3 Sites interessa 31 Membres § Connexions 


B Marche 







ADMINISTRATION 

1 Clubbonsvrvants [C/Clubbonsvivants/] [. : _, _ . 1 



Donnees MySQL (datadir) : repertoire actoel "C \Program Fies\EasyPHP\rnysqHdata " [ r :':;fier ] 

Administrez vos bases de donnees : 

Ctajuez sur le bouton o-dessous pour acceder a Tad ministration des bases de donnees 

llli lMtMIBffln 

Environnement EasyPHP : 

Ces pages vous intormeront sur le bon fonctonnement de PHP. sa configuration et sur les elements instates 



Bienvenue dans votre environnement EasyPHP. 

Si vous voyez cefle phrase, PHP fonctonne Pour verifier le fonctionnement de MySQL, vous pouvez acceder su centre d' administration 
-PhpMyAdmin' 

Si vous renconlrez des problemes. reporter vous au Site d"EasyPHP : www easvphp org 



▲ Figure 2.7 : EasyPHP 
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Pour l'installation d'EasyPHP, la procedure est simple. Vous telechargez 
le logiciel sur www.easyphp.org puis l'installez en un clic. II installe le 
serveur Apache, le moteur PHP le plus recent et la base de donnees 
MySQL accompagnee de l'outil d' administration PHPmy Admin. Sous 
Windows, vous avez deja un serveur web installe, IIS. Si vous rencontrez 
un probleme pour voir apparaitre la page d'accueil d'EasyPHP, c'est 
souvent a cause d'un conflit avec le serveur de Windows, IIS. II suffit alors 
de le desactiver. De meme, des logiciels pare-feu comme ZoneAlarm, par 
ailleurs utiles, peuvent empecher Faeces a la page du logiciel d' adminis- 
tration de la base MySQL, PHPmyAdmin. Dans la plupart des cas, 
EasyPHP ne pose aucun probleme. D'autres installations comprenant PHP 
et MySQL existent, y compris pour Mac OS. Nous les citons en annexe de 
Fouvrage. 

Autres logiciels 

Pour envoyer vos pages sur l'espace qui vous est alloue sur le serveur de 
l'hebergeur, utilisez un logiciel FTP dont vous trouverez la liste en annexe 
de cet ouvrage. 



_FTP LE mycgiserver.c 



J 



Local System 




* | Name |j 


CtigDir 


t .. 

M creer. jsp ( 
US accuei 1 .jsp ( 

a [-F-] 
a [-»-] 
a [-d-] 
a [-=-] 

B [-a-] 


MkDIr 






Exec 


Rename 




Refresh 


< > 


Dirinfo 



Name 



M .korrigan 
HI anfy .class 
El AnWater.clas" 
UlAnWater.jar 
HH carfantan.gi" 
M helloworld.c" 
H! hel loworld . j " 
ffl helloworld.H" 
HHelloWorldSe" 
M index.html 
IZI r.¥5re .class 



010705 
010705 
010705 
010705 
010705 
010705 
010705 
010705 
010705 
010705 
010705 



■ Refresh 



r ASCII (5 Binary [7 Auto 

1 50 Opening ASCII mode data connection for file list 
Received 958 bytes in 0 2 sees (45 00 Kbps) transfer succeeded 
226 Transfer complete. 



i 



Figure 2.8 : WS_FTP 



La plupart de ces logiciels comportent une fenetre a gauche pour votre 
machine et une a droite pour votre repertoire sur la machine distante. 
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Auparavant, vous aurez entre le nom d'usage (username ou login) et le 
mot de passe (password) octroyes par l'hebergeur. Dans le nom de 
domaine, vous entrez une URL ou un numero IP. Entre les deux fenetres, 
deux fleches montrent le sens de la transaction. Selon la provenance et la 
destination de vos fichiers, vous cliquerez sur l'une ou l'autre, apres avoir 
selectionne dans la fenetre de provenance le fichier en question. 

Pour Macintosh, le logiciel le plus courant est Fetch. 

L'hebergement 

Pour l'hebergement de vos pages, vous avez l'embarras du choix. Vous 
trouverez une liste en annexe du livre. Pour choisir, soyez attentif a 
plusieurs criteres : 

■ La place de la publicite sur votre page ; 

■ La presence de la fonction mai 1 () pour envoyer des e-mails a partir 
de votre programme PHP et d'un htaccess pour proteger vos reper- 
toires ; 

■ La coherence de votre adresse internet (URL), qui doit etre courte pour 
etre memorisee facilement ; 

■ La plate-forme sur laquelle le site est developpe, NT ou Linux/Unix. 

PHP fonctionne bien sous Windows NT, mais vous ne disposez pas de 
toutes les fonctionnalites de Unix, en particulier pour les fonctions 
concernant le systeme de fichiers. 

Reportez-vous au chapitre Des algorithmes, des outils et des 
fonctions pour plus de details. 

Le fichier .htaccess est un fichier sous Unix qui protege certains repertoires 
par une authentification. 

Reportez-vous au chapitre L'internaute est d'abord une per- 
sonne pour plus de details. 
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Allez sur differentes pages de F hebergeur selectionne et interrogez 
d'autres webmestres pour savoir s'ils sont satisfaits des services proposes. 




Un hebergeur francophone 

Vous parlez mal I'anglais, preferez alors un hebergeur franco- 
phone. En effet, le jour ou vous avez des problemes et devez 
passer par le soutien technique, vous serez content de decrire votre souci 
en francais. 



Vous pouvez changer en cas de deception. Une fois FURL de votre site 
diffusee, il est cependant fastidieux, voire parfois impossible, de contacter 
toutes les personnes pour les avertir du changement. Placez alors une page 
de redirection chez votre ex-hebergeur pour aiguiller les visiteurs vers 
votre nouvelle page. 

La plupart des hebergements gratuits utilisent un serveur Apache installe 
sur des machines sous Linux. Ces offres gratuites sont rendues possibles 
par le monde du Libre. 



Reportez-vous a I'annexe pour obtenir la liste des offres 
d'hebergement. 




2.5 Ma page 



Maintenant que vous avez installe les logiciels, vous allez pouvoir 
entreprendre de petites choses et entrer reellement dans le monde des 
programmeurs. 

Ouvrez votre traitement de texte ou d' edition de code. Entrez les balises 
obligatoires <HTMLx/HTML>. A l'interieur, ajoutez les balises qui composent 
les deux parties d'une page : l'en-tete <HEADx/HEAD> et, au-dessous, les 
balises <B0DYx/B0DY>. Vous obtenez une page blanche. Maintenant, 
ajoutez un titre dans les balises <HEAD>qui apparaitront comme une enseigne 
dans l'en-tete du navigateur. <TITLE>Le cl ub</TITLE>. 

La page est encore vide, alors vous allez vous presenter. Dans l'etau des 
balises <B0DY>, ecrivez je m'appelle. 
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Tapez maintenant votre premier code PHP. 

Pour inserer du code PHP dans une page, vous devez l'entourer des balises 
<? ?> (ou parfois <?php ?> ou <% %>). 

Avant la balise <HTML>, vous allez inserer votre premiere variable. 
<? 

$mon_nom="Frangoi s" ; 

?> 

Vous remarquez le signe dollar, l'espace souligne (underscore), le signe 
egal, les guillemets et le point-virgule. 

Le signe $ initiant un mot indique qu'il s'agit d'une variable. Une variable 
est un espace de memoire vive alloue a une information. On prefere lui 
donner un nom comprehensible. mon_nom signifie davantage qu'une 
adresse memoire avec du code informatique. Quand vous relirez votre 
programme, vous saurez qu'il s'agit du nom de quelqu'un, en l'occurrence 
de celui de Francois Rabelais car vous etes un bon vivant et aimez la 
bonne chere. Ici, l'espace souligne remplace l'espace car on ne peut 
utiliser d' espace dans une variable. 

Le signe egal cree une affectation, les guillemets indiquent au moteur PHP 
qu'il s'agit ici d'une chaine de caracteres et le point-virgule ferme la 
commande. La commande peut s'etaler sur plusieurs lignes mais le 
point-virgule indique au moteur que ce qui a precede est une unite, un 
ordre d'execution. L'affectation est Faction d'affecter une valeur a une 
variable. Ainsi, l'espace memoire appele mon_nom recoit la valeur 
Frangois. 



Le signe egal 

Le fait que les premiers concepteurs de programmes aient 
choisi le signe egal pour caracteriser l'affectation d'une valeur a 
une variable enframe souvent la confusion avec I'egalite qui, elle, est 
signalee par un signe double egal (==). Certains bogues sont dus a 
cette confusion, surtout dans les tests avec i f que nous verrons dans 
le chapitre 3. 
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Enregistrez maintenant votre page dans le repertoire club a l'interieur du 
repertoire www du dossier d'EasyPHP sous le nom index.php. Puis ouvrez 
votre navigateur web et faites un clic avec le bouton droit de la souris sur 
la petite icone dans la barre de taches de Windows qui symbolise 
EasyPHP. Un menu apparait. Selectionnez Web local et cliquez sur le 
petit repertoire club. Rien n'apparait, juste une page blanche. Vous avez 
cree une variable mais ne l'avez pas envoyee sur l'ecran. Pour cela, 
inscrivez <? echo $mon_nom ?> en dessous de la balise body. Vous 
remarquez que nous avons omis le point-virgule. En fait, la balise ?> 
inscrit la fin de la commande et le point-virgule est ici optionnel. 

Maintenant, vous avez plusieurs methodes pour ajouter le nom. 



Tab. 2.3 : Tous les chemins menent a Rome 


Premiere ligne 


Deuxieme ligne 


$mon nom="Frangois Rabelais"; 




$mon nom="Frangoi s" . " "."Rabelais"; 




$mon nom = "Frangois"; 


$mon nom =$mon nom." Rabelais"; 


$mon nom = "Frangois"; 


$mon nom="$mon nom Rabelais"; 



$mon_nom = "Frangois" 



$mon nom.=" Rabelais" 



Ces cinq solutions donnent le meme resultat, Frangois Rabelais. 
Passons maintenant aux explications. 

La ligne 1 est une chaine de caracteres. Vous ecrivez comme d'habitude, 
en langage naturel, avec un espace entre les mots. 

La ligne 2 du tableau introduit une fonction exprimee par le point, une 
fonction de concatenation. Ainsi, cette fonction assemble les trois tron- 
50ns de phrase, espace inclus. Les guillemets doubles comme les 
guillemets simples indiquent que la valeur est une valeur de type stri ng. 
Dans certains langages, vous devez toujours preciser le type d'une donnee 
et il est malaise de faire passer une donnee d'un type a un autre, ce qui 
n'est pas le cas en langage PHP qui reconnait de lui-meme le type de la 
donnee. Nous verrons cela dans le chapitre 3. 
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II existe des differences entre le guillemet double et le guillemet simple 
car la ligne 4, si on avait employe des guillemets simples, aurait affiche 
litteralement $mon_nom Rabel ai s, c'est-a-dire que la variable n'aurait pas 
ete extrapolee mais prise pour un mot commencant par le signe dollar. 

Nous approfondirons dans le chapitre 3 les differences entre les 
guillemets simples et les guillemets doubles. 

Les commentaires 

Les commentaires sont uniquement destines au programmeur. lis ne 
seront ni affiches, ni executes. lis permettent d' identifier telle partie de 
programme sans interferer dans le programme. 

En HTML, le commentaire s'ecrit ainsi <! — Ceci est un commentaire 
— >. 

En langage PHP, votre commentaire tient sur une ligne : 
// Ceci est un commentaire sur mon code PHP 

Mais si vous voulez documenter soigneusement votre programme (recom- 
mande), vous avez toute licence d'ecrire un commentaire de plusieurs 
lignes : 

/* Ceci est un commentaire sur mon programme en PHP qui va me 
permettre de retrouver mon aiguille dans le tas de foin qu'est 
devenu mon code apres moults ajouts */ 

PHPinfoO 

Sur votre machine, a la page d'accueil d'EasyPHP, cliquez sur le bouton 
infos php. Vous verrez apparaitre la configuration de votre moteur PHP. 

Vous pouvez visualiser cette liste de configuration sur le serveur de votre 
hebergeur en creant un fichier : 

<? 

phpinfoO ; 

?> 
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Detruisez-le, apres 1' avoir sauvegarde sur votre machine, pour des raisons 
de securite. II n'est pas bon de laisser des informations concernant les 
coulisses de votre site chez votre hebergeur, a la disposition du public. II 
en sera de meme pour un fichier qui contient un programme de courrier en 
nombre a partir de votre base. 



tfj [EasyPHP] - Administration - 


Netscape 


E 


B 




Fichier Edition Affichage Aller Communicator ? 


ices 

Precedent Recharge 




a a 

Accueil Rechercher Guide 


Imprimer Securite 


U I 

Arreterj 




lj ^'Signets Adresse: 


http://127.0.0.1/home/index.php?to=phptnfo 


▼ | Infos connexes 


^ Qt Internet @] Nouveautes 


Bl Sites interessa [Sj] Membres @1 Connexions @J] Marche 






implicit_flush 


On 


On 




include_path 


;C:\Program 
Files\EasyPHP\php\pear\ 


;C:\Program 
Files£asyPHP\php\pear\ 




log_errors 


Off 


Off 




magic_quotes_gpc 


On 


On 




magi c_q u ote s_ru ntime 




i 


Off 


Off 




magic_quotes_sybase 


Off 


Off 




max_execution_time 


30 


30 




open_basedir 


no value 


no value 




output_buffering 


no value 


no value 




output_handler 


no value 


no value 




post_max_size 


8M 


8M 




precision 


14 


14 




re g i ster_arg c_a rg v 


On 


On 




1 < 










> 




Document: charge 













▲ Figure 2.9: affichage de la fonction phpinfo() 
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Dans ce chapitre, nous etudierons les regies de la syntaxe. Nous 
aborderons surtout la nature des variables et des valeurs, les operateurs qui 
leur permettent d'interagir et les fonctions qui, a la maniere de verbes, 
articulent les mots et les modifient. A la difference d'une langue, 
Fordinateur compte et verifie les valeurs, ce qui autorise les boucles et les 
tests. Nous ceuvrons au cceur d'un langage tres democratique ou l'infor- 
mation et le pouvoir sont largement distribues. Commencons par decliner 
les differents types de variable. 

3.1 Variables scalaires 

Les variables scalaires contiennent une seule valeur, par opposition aux 
tableaux qui en contiennent plusieurs. 

Le nom de variable 

Un nom de variable qui represente une valeur ou un ensemble de valeurs 
doit commencer par une lettre ou un blanc souligne (_), suivi de lettres, 
chiffres ou soulignes. Attention, le langage PHP distingue la casse dans le 
nom des variables. Ainsi $Fromage et $fromage sont des variables 
differentes. 




Choix du nom des variables 

Soyez coherent dans le choix du nom des variables. L'ob- 
jectif est d'obtenir un nom signifiant pour vous mais pas trap 
explicite. $nbre_boutei 1 1 e sera aussi significatif que $nombre_de_bou- 
tei 1 1 es mais vous aurez moins de caracteres a taper a chaque fois que 
vous I'utiliserez. Soyez rigoureux dans vos criteres de nommage. Evitez 
les capitales car vous risquez de les oublier la deuxieme fois que vous 
taperez le nom de la variable et d'engendrer ainsi une erreur avec une 
variable inexistante. Notez que le nom du champ d'un formulaire est 
utilise pour nommer la variable qui en est issue, soyez rigoureux aussi 
sur ces noms de champ. 



La valeur des variables scalaires peut etre de plusieurs types. II est bon de 
connaitre ces derniers meme si en general, le langage PHP fait le travail 
a votre place dans la plus grande transparence. 
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Le type des variables 



Tab. 3.1 : Les differents types de variables 


Type 


En frangais 


Exemple 


integer ou int 


Entier 


45 


float 


Nombre a virgule 


45.2 


string 


ChaTne de caracteres 


"J'veux faire du PHP!" 


boolean on bool 


Booleen 


fal se OU true 



Les variables en langage PHP sont typees implicitement. Ainsi, PHP 
reconnaitra un chiffre ou des lettres et le point du nombre a virgule 
flottante. II vous laisse cependant la possibility de forcer le type : 

$code_postal ="06400"; 
$code_postal = (int)$code_postal ; 

Ici, $code_postal qui serait naturellement une chaine de caracteres a 
cause des guillemets, peut etre transtype en nombre. Le forcage du type en 
int lui enleve le 0 du debut. Par contre, si 06400 avait ete sans guillemets, 
le nombre aurait interprete comme un octal a cause du 0 le precedant et 
aurait done valu done 3328 sur la deuxieme ligne. Vous le verrez avec 
Fassociativite des operateurs, le sens du traitement avec 1' affectation et le 
transtypage est de la droite vers la gauche. La variable $code_postal est 
ici transtypee puis affectee a elle-meme, elle n'a plus rien d'un code 
postal. Faites bien la difference entre un chiffre et un nombre sinon, vous 
aurez des surprises. 

Les entiers 

Les variables de type entier sont assez simples a comprendre. 
Vous pouvez ecrire par exemple : 
$a=l; 

$b=2; 
$c=$a+$b; 

En 1' occurrence, $c contient la valeur 3. 
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Si vous mettez les valeurs 1 et 2 entre guillemets doubles ou simples, PHP 
devine qu'il s'agit de valeurs numeriques et non de chaine de caracteres 
grace a l'operateur +. II fera, malgre tout, la somme des deux variables : 

$a= ' 1 ' ; $b="2"; $c=$a+$b; 

PHP vous simplifie la vie car il assume ces taches de typage des donnees 
qui alourdissent inutilement le travail du programmeur et peuvent 
constituer une source d'erreurs. 

Les nombres a virgule f lottante 

Mefiez-vous des f 1 oat, c'est-a-dire des nombres a virgule flottante, car ils 
operent une approximation sur le resultat. Si vous avez comme resultat 
d'une operation un nombre tel que 6.555973333, il arrive souvent que les 
chiffres suivent la virgule a l'infini. Comme toute bonne chose a une fin, 
Fordinateur opere une approximation sur le nombre pour ne pas generer 
un bogue de programme sans fin. 

En anglais, le point remplace la virgule du francais. Le type f 1 oat com- 
prend done un point. 

Nous verrons dans le chapitre Des algorithmes, des outils et 
des fonctions qu'il suffit de formater le nombre pour faire 
apparaTtre une virgule a la place du point. 

Les booleens 

Pour specifier un booleen, vous pouvez utiliser f al se ou TRUE. Ce dernier 
est insensible a la casse. 

Les valeurs considerees comme f al se sont : 

■ le booleen FALSE ; 

■ l'entier 0 (zero) ; 

■ le nombre a virgule flottante 0 . 0 (zero) ; 

■ la chaine de caracteres vide et le caractere 0 ; 

■ un tableau sans element ; 

■ le type NULL (y compris les variables passees par la fonction unset ( ) ). 
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Les autres valeurs sont considerees comme true. 

L'interet de cette liste est que les valeurs f al se repondront true au test 
if (!$vari able) que nous evoquerons plus loin dans les structures de 
controle. 

Pour l'inverse, i f ($vari abl e) est true si la variable existe et qu'elle est 
differente de 0, de NULL ou de " ". Par contre, si elle vaut " ", l'expression 
renvoie aussi la valeur true. 

Les chames de caracteres 

Le type string est de loin le plus utilise. Les espaces sont significatifs a 
Finterieur d'une chaine de caracteres. Elle est encadree par des guillemets 
simples (apostrophes) ou doubles (guillemets anglais) qui conditionnent 
1' interpretation des caracteres de controle (nouvelle ligne, tabulation. . .) et 
des variables inserees. 

Les guillemets 

II en existe deux types, sans compter les guillemets arriere ('), utilises pour 
des commandes systeme sous Unix que nous n'evoquerons pas dans cet 
ouvrage. 

Les guillemets simples 

Vous l'avez vu dans le chapitre precedent, les chames de caracteres 
inserees dans des guillemets simples sont affichees litteralement. Vous ne 
pouvez done y utiliser des variables. 

$une_phrase= ' je suis sur la page'; 

affichera la phrase integrale. Comment faire pour une phrase contenant 
une apostrophe ? 

$une_phrase= ' je m'y emploie'; 

Avec cette phrase, vous afficherez une erreur sur la page web. Pour y 
remedier, il vous suffit d'ajouter un signe d'echappement avant l'apos- 
trophe. 

Maintenant, vous obtenez : 
$une_phrase= ' je m\'y emploie'; 
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Cette phrase est parfaitement acceptee par le moteur PHP qui, s'il voit un 
guillemet simple commencer une chaine, cherche le deuxieme guillemet 
qui la clot. Quand il trouve 1' apostrophe, il conclut qu'elle sert de cloture 
a la chaine, alors aidez-le avec une barre oblique inversee pour qu'il fasse 
la difference entre une apostrophe et un guillemet simple fermant. 

Les guillemets simples sont tres utiles au programmeur qui doit ecrire un 
certain nombre de lignes HTML avec des echo. II n'aura pas besoin de 
placer des caracteres d'echappement devant chaque guillemet double 
delimitant les valeurs d'attribut HTML. 



echo '<td bgcol or="#FFFFFF"xfont face="Arial ">Email :</fontx/td>' ; 
sera correct. Vous disposez d'un outil tres accommodant. 




Les caracteres d'echappement 

Le caractere d'echappement (ici, la barre oblique inversee) 
permet de signifier que le caractere suivant echappe a son 
interpretation normale. 



Si vous allez a la ligne dans une chaine entre guillemets simples, cette 
derniere affichera ce passage a la ligne : 



Listing 3.1 : <pre> avec des guillemets simples : pre.pbf. 

<? 

$phrase= '<PRE>Je vais a la ligne 
Ah je suis une ligne plus bas! 
Bon, je mVarrete la.</PRE>'; 
echo "<font size=\"7\"xb>$phrase</bx/font>" ; 
?> 



La page web affichera le passage a la ligne. 
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fT r n x 1 
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Je vais a la ligne 

_, _ . _ 

An je suis une .Ligne plus 

Bon, je m'arrete la. 


Das ! 


[tocument: Chary 


- _ Iff / 



▲ Figure 3.1 : Passage a la ligne a Vinterieur de guillemets simples 



La balise <PRE> 

La balise HTML <pre> demande au navigateur d'afficher la 
page avec les attributs litteraux du texte en police courri er. Pour 
afficher la ligne, il creera une balise <br> a chaque retour chariot. 



Les guillemets doubles 

Les guillemets doubles servent aussi a caracteriser des chaines de 
caracteres, avec cependant quelques nuances. 

Comme nous l'avons vu, les doubles guillemets font une extrapolation de 
variable, c'est-a-dire qu'ils remplacent le nom des variables par leur 
valeur. D'autre part, ils permettent d'utiliser des syntaxes speciales 
d'echappement. 

Prenons un exemple tire du poeme l'Ame du vin de Charles Baudelaire : 
Listing 3.2 : L'Ame du vin : ame_vin.php 

$versl="Un soir, l'ame du vin chantait dans les boutei 1 1 es !<BR>\n" ; 
$vers2=" - V'Homme, vers toi je pousse, 5 cher desherite,<BR>\n"; 
$vers3="Sous ma prison de verre et mes cires vermei 1 1 es ,<BR>\n" ; 
$vers4="Un chant plein de lumiere et de fraterm'te!<BR>\n"; 
$strophe=$versl.$vers2.$vers3.$vers4; 

Cette strophe demande quelques eclaircissements. 
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Chaque ligne est close par une balise <BR> et une sequence d'echappe- 
ment \n. Nous avons vu que la balise <BR> affichait une fin de ligne dans 
une page web HTML. Le \n aussi. Le \n, exclusivement dans des 
guillemets doubles, constitue une fin de ligne. Pourquoi mettre deux fois 
une fin de ligne ? Simplement pour obtenir un code source propre et 
lisible. La source HTML renvoyee par le moteur PHP sera : 

Un soir, 1'ame du vin chantait dans les boutei 1 1 es !<BR> 
- "Homme, vers toi je pousse, 6 cher desheri te,<BR> 
Sous ma prison de verre et mes cires vermei 1 1 es,<BR> 
Un chant plein de lumiere et de fraternite!<BR> 

La sequence d'echappement \n n'est pas repercutee dans l'affichage de la 
page mais dans l'affichage du code source HTML. 

D' autre part, vous avez remarque sans doute que la sequence \" 
permettait d'inserer des guillemets doubles dans une chaine encadree 
elle-meme de guillemets doubles, comme pour l'apostrophe precedem- 
ment. Par contre, l'apostrophe n'a pas besoin de barre oblique inversee a 
l'interieur de doubles guillemets, c'est logique. 



Tab. 3.2: Les sequences d'echappement 



uence d'echappement 

\n 
\r 
\t 
\$ 
\\ 

Les constantes 

Les constantes represented un confort pour le programmeur. Elles evitent 
une perte de temps et les programmes gagnent en lisibilite. Elles 
s'ecrivent en capitales. 

Pour les declarer, utilisez la fonction define () : 

<? 

define ('PI', 3.1415); 

define ('HAIL', 'LivrePHP@carfantan.com'); 

?> 



Definition 




Nouvelle ligne 

Retour chariot (utilise uniquement sous Windows) 
Tabulation 
Le signe Dollar 
Barre oblique inversee 
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II est plus facile de taper PI que 3. 1415 et si vous decidez d'ajouter des 
decimales, il suffit de le faire une fois pour chaque fichier 
(3.1415926535). La plupart des logiciels permettent un remplacement 
approfondi et automatique dans tous les fichiers a l'interieur d'un 
repertoire. Ici, il sera plus aise de changer uniquement cette ligne dans 
chaque fichier. 



Extrapolation des constantes 

Les constantes ne sont pas extrapolees a l'interieur d'une 
chaTne de caracteres. 



Listing 3.3 : Extrapolation d'une constante : extrapolation_const.php 

<? 

echo '<font face="Arial Black" size="5">'; 
echo "1 : La valeur de Pi est ".PI. 1 <BR> ' ; 
echo "2 : La valeur de Pi est PI<BR>"; 

echo "ecrivez-moi a <A HREF=\"mai 1 to: " .MAIL. "\">" .MAIL. "</A>" ; 

echo '</font>' ; 

?> 



La constante n'est pas a l'interieur des guillemets. Elle est concatenee 
entre les deux parties de la phrase. Dans la ligne numerotee 2, elle n'est 
pas extrapolee, etant a l'interieur des parentheses. 



^ Extrapolation de constantes - Netscape 



Fichier Edition Affichage Aller Communicator ? 



3 

Recharger 



Accueil 



Guide 



Imprimer 



<£ 

Securite 



Precedent 

' Signets A Adresse: |;//127.0.0.1/Clubbonsvivants/essai/extrapolation_constphp ® " Infos connexes 
§] Internet |§l Nouveautes §] Sites mteressa §] Membres §] Connexions [§) Marche 



1 : La valeur de Pi est 3.1415 

2 : La valeur de Pi est PI 
ecrivez-moi a livrePHP@carfantan.com 



mafto: rivrePHP@carfantan.com 



▲ Figure 3.2 : Extrapolation d'une constante 
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Extrapolation de variable 

II arrive que vous soyez oblige de coller une variable a des caracteres. S'il 
s'agit de deux variables, cela fonctionne a condition de les encadrer de 
guillemets doubles : 

$annonce="Fel i citations, vous y etes arrive"; 
$genre='e' ; 

$fin_annonce=", vous gagnez une bouteille de Bourgueil!"; 
echo $annonce$genre$f in_annonce; 

Le resultat affichera : Felicitations, vous y etes arrive, vous 
gagnez une bouteille de Bourgueil!. 

Par contre, si vous desirez coller une variable devant un mot quelconque, 
le moteur PHP prendra les deux mots pour une seule variable. Vous 
pouvez malgre tout l'afficher en utilisant des accolades : 

$nombre=10; 

echo "Patience! c'est la ${nombre}e fois que vous cliquez pour 
envoyer ce formulaire que nous sommes deja en train de traiter"; 

Le resultat affichera : Patience! c'est la lOe fois que vous cliquez 
pour envoyer ce formulaire que nous sommes deja en train de 
traiter. 

Le langage PHP a ete forge par des utilisateurs confronted a tous les 
problemes possibles sur Internet. Des solutions adaptees ont ete apportees 
au fil des versions. Seule le Libre pouvait le permettre. 

Construire une variable dynamique 

Le langage PHP est un langage de bricoleurs mais on ne bricole pas sans 
une certaine rigueur. Ainsi, il est possible de construire une variable a 
partir d'une autre variable qui fournit un nom en dynamique : 

Listing 3.4 : Variables dynamiques : var_dynamique.php 

<? 

// commencez par creer la variable qui donnera le nom 
$nom_au_vol ="nom_doi seau" ; 

// ensuite donnez une valeur a la variable dynamique 
$$nom_au_vol = ' Pi geon 1 ; 
//enfin vous pouvez l'utiliser 
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echo $nom_doi seau; 

//ici le programme affichera Pigeon 

?> 



Nous en verrons les applications dans le chapitre Des algo- 
rithmes, des outils et des fonctions. 



Les tableaux 

Le tableau est une variable qui contient plusieurs valeurs. II existe deux 
types de tableaux : les tableaux indexes par des nombres de 0 a n et les 
tableaux indexes par des noms. 



Les noms de tableaux 

Reservez le pluriel dans les noms de variable aux tableaux 
car en PHP, rien ne distingue le nom d'un tableau du nom d'une 
iable scalaire. 



L'index est le groupe d'indices qui permet de classer les donnees a 
Finterieur d'un tableau afin de pouvoir inserer des valeurs et les retirer le 
cas echeant. 

Les tableaux a index de noms sont des tableaux de hachage et ceux a 
index numerique sont appeles simplement des tableaux. Enfin, les ta- 
bleaux multidimensionnels sont des tableaux qui contiennent d'autres 
tableaux et non des valeurs scalaires. 

Les tableaux a index numerique 

Pour entrer des donnees dans un tableau, il suffit d'utiliser les crochets : 



$mon_tabl eau[] =$ma easel; 



La valeur de $ma_casel se logera dans la premiere cellule du tableau, 
qui est a 1'indice 0. La deuxieme valeur sera logee dans la cellule 
d'indice 1, etc. 
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Vous pouvez choisir la case ou sera inseiee votre valeur 
$mon_tabl eau [4] =$ma_casel ; 

Ici, la valeur sera inseree dans la 5 e case. 



Tout tableau commence a I'indice 0 

La premiere case etant la case 0, ne confondez pas la place 
de la derniere cellule dans le tableau et le nombre de cellules 
dans le tableau. Si vous avez cinq cases, I'index de la derniere est 4. 



Pour recuperer une valeur du tableau, il suffit de connaitre sa place : 

$ma_valeur=$mon_tableau[4] ; 
echo $ma_valeur; 
echo "<br>"; 

//une autre fagon de faire 
echo "$mon tableau [4]"; 



Les tableaux de hachage (ou tables d'adressage 
associatif) 

Ces tableaux sont indexes par nom, ce qui est souvent plus pratique, un 
peu comme les URL d' Internet. 

II est plus facile de taper et de memoriser www. mul ti dimensionalmusi c 
. com que 207.158.192.40, numero IP du serveur. 

Nous utilisons le meme systeme pour inserer une donnee ou la recuperer 
mais il est plus facile de retrouver une donnee avec un nom. 




£l Les guillemets simples pour I'indice nominal 

N'oubliez pas les guillemets simples pour encadrer le nom a 
I'interieur des crochets : 

$mon_tabl eau_hachage[ 1 Frangoi s Rabel ai s '] = ' Gargantua 1 ; 
$1 i vre=$mon_tableau_hachage[ ' Frangoi s Rabel ai s '] ; 
echo $livre; 
//affichera Gargantua 
//une autre fagon de faire 

echo $mon_tableau_hachage[' Frangoi s Rabelais']; 
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§1 Si pour la derniere ligne de I'exemple, vous utilisez des 
^fte*^ guillemets avec echo, vous afficherez une erreur : 

$mon_tabl eau_hachage[ ' Frangoi s Rabel ai s '] = ' Gargantua 1 ; 
echo "$mon_tableau_hachage[ ' Frangoi s Rabelais'] 1 '; 
//ce n'est pas valide 

echo " {$mon_tabl eau_hachage[ ' Frangois Rabelais 1 ]}"; 
/*ici grace aux accolades, la page affichera la 
valeur correspondant a Frangois Rabelais : 
Gargantua.*/ 



Le nom ou le nombre qui indexe est appele une cle et la valeur 
correspondante une valeur. Pour ce type de tableau, on parle d'une paire 
cle/valeur. 



Cle unique 

Chaque cle doit etre unique sous peine d'effacer la valeur 
precedents de cle identique. 



Les tableaux multidimensionnels 

Ce type de tableau est forme de tableaux de hachage ou de tableaux, ou 
d'un melange des deux. 

La cle s'appuie sur le meme principe que les deux types de tableaux 
precedents mais la valeur peut etre un tableau a 1 ou n tranches. 

Rabelais a ecrit plusieurs livres. Creons un nouveau tableau de hachage 
contenant un tableau : 



$1 i vres [] = " Gargantua" ; 

$1 i vres [] = "Pantagruel " ; 

$auteurs ['Frangois Rabel ai s '] =$1 i vres; 

echo $auteurs ['Frangois Rabelai s '] [1] ; 

//affichera Pantagruel 
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Essayons maintenant un tableau de hachage contenant un tableau de 
hachage : 

$1 i vres [ ' premier 1 i vre '] ="Gargantua" ; 

$1 i vres [' deuxi erne 1 i vre 1 ] =" Pantagruel " ; 

$auteurs ['Frangois Rabel ais '] =$1 i vres; 

echo $auteurs ['Frangois Rabel ai s '][' premier livre']; 

//affichera Gargantua 

Nous n'avons pas encore essaye un tableau contenant un tableau de 
hachage : 

$1 i vres [' premier 1 i vre '] = " Gargantua" ; 
$1 i vres [' deuxi erne 1 i vre'] = "Pantagruel " ; 
$auteurs []=$livres; 
echo $auteurs [0] ['premier livre']; 
//affichera Gargantua 

Enfin, il n'y a pas de raison de delaisser le tableau contenant un tableau, 
surtout qu'il se revele tres utile dans les boucles, comme nous le verrons 
dans le chapitre MySQL en action : 

$1 i vres [] = " Gargantua" ; 
$1 i vres [] = "Pantagruel " ; 
$auteurs []=$livres; 
echo $auteurs [0] [1] ; 
//affichera Pantagruel 

Vous pouvez melanger les deux types d'index dans le meme tableau : 

$1 i vres [6] =" Pantagruel " ; 

$1 i vres [' premier 1 i vre '] =" Gargantua" ; 

$1 i vres[] = "Tiers livre"; 

/* la clef sera done 7, un numero au-dessus de 6 1'indice maximum 
precedent*/ 

$1 i vres [6] ="Quart livre"; 

/* cette derniere insertion ecrasera l'ouvrage Pantagruel qui a le 
meme indice*/ 
$auteurs []=$livres; 
echo $auteurs [0] [6] ; 
//affichera Quart livre 

Vous pouvez aussi empiler des tableaux sur autant de niveaux que vous 
pouvez en concevoir mais vous aurez peu d' occasions de les utiliser sur 
autant de niveaux et perdriez beaucoup de temps a les concevoir. 
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3.2 Les operateurs 



Les operateurs fournissent les fonctions essentielles a un langage de 
programmation pour que les variables interagissent. 

Les operateurs arithmetiques 



Tab. 3.3 : Les operateurs arithmetiques 



Norn 


Exemple 


Action 


Addition 


$a+$b 


Additionne les valeurs de $a et de $b. 


Soustraction 


$a-$b 


Soustrait la valeur de $b de la valeur de $a. 


Multiplication 


$a*$b 


Multiplie les valeur de $a et de $b. 


Division 


$a/$b 


Divise la valeur de $a par la valeur de $b. 


Modulo 


$a%$b 


Retourne le reste de la division de la valeur 
de $a par la valeur de $b. 



Les operateurs d'affectation 

L'operateur d'affectation est le signe =. Ne le confondez pas avec 
l'operateur de comparaison == (egal a). 

Ainsi, dans $a=3, la variable $a re9oit la valeur 3. 

Des declinaisons de cet operateur proposent au programmeur des raccour- 
cis. II suffit de combiner le signe egal a un operateur arithmetique, a un 
operateur de bit ou a l'operateur de concatenation : 

$a=6; 

$a+=3; // $a prend la valeur de 9 
$a-=2; // $a prend la valeur de 7 

$a%=3; //$a prend la valeur de 1 (reste de la division de 7/3) 
$a="Bonjour" ; 

$a.=", il fait beau"; // resultat : Bonjour, il fait beau 
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Les operateurs de bits 

Chaque caractere est compose d'un octet, c'est-a-dire 8 bits (0 ou 1). 
Ainsi, la lettre A est codee 01000001 et la lettre a, 01100001. 

Les operateurs portent surtout sur les bits positionnes sur la valeur 1. 



Tab. 3.4 : Les operateurs de bits 


Exemple 


Nom 




$a & $b 


AND (et) 


Les bits a 1 dans les deux variables restent a 
1. 


$a | $b 


OR (ou) 


Les bits a 1 dans I'une ou les deux variables 
restent a 1. 


$a ~$b 


XOR (ou exclusif) 


Chaque bit a 1 dans $a ou dans $b reste a 1 
sauf si le bit est a 1 pour les deux variables. 
Dans ce cas, il est positionne a 0. 


~$a 


NO (non) 


Chaque bit est inverse. Le bit a 1 est 
positionne a 0 et vice versa. 


$a« $b 


Decalage a 
gauche 


Chaque bit est decale de $b positions vers la 
gauche. Les bits de gauche se retrouvent a 
droite dans le meme ordre. 



$a» : 



Decalage a droite Chaque bit est decale de $b positions vers la 
droite. Le 8 e bit devient le premier, etc. 



Ces operateurs servent a crypter un texte, par exemple. En decalant les bits 
vers la gauche ou la droite avec une cle de 1 a 8, vous modifiez les 
caracteres d'un texte. II suffit ensuite de faire l'operation inverse pour 
avoir le texte en clair. C'est comme un cercle oil les deux extremites se 
rejoignent et ou les 0 et les 1 se decalent dans un sens ou dans l'autre. 
Cette methode se combine avec des algorithmes plus complexes. 

Les operateurs de comparaison 

Ces operateurs sont tres souvent utilises pour tester des valeurs avec un i f . 
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Tab. 3.5 : Les operateurs de comparaison 


CXciIipifc? 




rfBSUIuu 


$a== $b 


Egal 


Vrai si $a est egal a $b 


$a=== $b 


Identique 


Vrai si $a est egal a $b et de meme type 


$a!= $b ou 
$a<> $b 


Different 


Vrai si $a est different de $b 


$a!== $b 


Non identique 


Vrai si $a est different de $b ou s'ils ne 
sont pas de meme type 


$a <$b 


Plus petit 


Vrai si $a est plus strictement petit que 
$b 


$a >$b 


Plus grand 


Vrai si $a est strictement plus grand que 
$b 


$a <= $b 


Inferieur ou egal 


Vrai si $a est plus petit ou egal a $b 


$a >= $b 


Superieurou egal 


Vrai si $a est plus grand ou egal a $b 



II reste un operateur de comparaison que nous presentons a part, 
1' operateur ternaire ?. 

$a==$b ? $c=8 : $c=2; 

Si la valeur de $a est egale a la valeur de $b, $c prend la valeur 8, sinon 
$C prendra la valeur 2. 

On l'utilise surtout pour des expressions courtes. On peut remplacer 
Fexemple par : 

if ($a==$b){ 
$c=8; 

} 

else { 
$C=2; 

} 




Nous approfondirons les tests et les boucles plus loin dans ce 
chapitre. 
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Les operateurs de controle d'erreur 

En PHP, les erreurs sont signalees sur la page directement avec le nom du 
fichier et le numero de ligne d'ou l'erreur provient. Nous verrons dans le 
chapitre Mettre de I'ordre que le numero de la ligne ou le nom du fichier 
peuvent etre differents de celui qui est indique pour des raisons que nous 
eclaircirons, mais en general il est assez precis. Par contre, nous n'avons 
pas forcement interet a ce qu'un visiteur y accede. C'est pourquoi avant 
de mettre en ligne vos pages, vous ferez des tests approfondis puis 
utiliserez l'operateur @. II est colle devant une fonction. 

Nous l'utilisons surtout pour les fonctions de connexion avec les bases de 
donnees. Voici par exemple une fonction que nous verrons dans le chapitre 
suivant : 



$resul tat=@mysql db query($dbname,$sql ,$id link); 

Sans cet operateur, il suffit que la base soit momentanement indisponible 
pour obtenir des messages disgracieux. 




8 Netscape EM ^ 






Fichier Edition Affichage Aller Communicator ? 




Precedent Recharger Accueil Rechercher Guide Imprimer Securite ■HI 






; Signets Adresse:|27.0.0.1/Clubbonsvivants/essai/extrapolation_constprip ▼ | W Infos connexes 
'\ §1 Internet §1 Nouveautes §1 Sites interessa §1 Membres §1 Connexions [jf Marche 




Parse error: parse error, unexpected T_C ONS T ANT ENC AP SED S TRING in 
c:\clubbonsvivantsvessai extrapolation const.php on line 12 




Document: charge | &p \&, 



A Figure 3.3 : Affichage d'une erreur 



II vaut mieux controler l'erreur et ecrire un message personnalise. Nous 
verrons cela dans le chapitre Mettre de I'ordre. 

Aucune partie du programme ne sera executee si une erreur est decelee par 
le compilateur. C'est un avantage car un programme tronque peut etre 
dangereux et generer par exemple des boucles infinies. II faut preciser que 
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PHP possede des garde-fous. Si le programme met plus de 30 secondes 
pour s'executer, il est arrete. Le temps maximum d'execution est indique 
a la rubrique max_execution_time dans le fichier cree par la commande 
phpi nf o ( ) . Attention toutefois de n'utiliser cet operateur qu'une fois vos 
programmes finalises. Autrement, certaines parties pourraient ne pas 
s'executer, a votre insu. 

Les operateurs unaires 

PHP permet d'incrementer ou de decrementer une variable numerique ou 
une chaine de caracteres. 

II s'ecrit ++$a, $a++ ou — $a et $a— . 

Les variables affublees de ++ s'incrementent elles-memes de 1 tandis que 
celles sur lesquelles est applique — se decrementent de 1. 

Selon que les operateurs sont places avant ou apres, la variable prend la 
nouvelle valeur avant ou apres. Voici un exemple : 

$a=2; 

echo ++$a; // affichera 3 
//mai ntenant $a vaut 3; 
echo $a; // affichera 3 
echo $a++; // affichera 3 
echo $a; // affichera 4 

L' operateur — se comporte de la meme facon. 

En ce qui concerne les caracteres, vous pouvez utiliser l'operateur unaire 
mais seulement pour incremented C'est parfois tres utile. Imaginez que 
vous vouliez une cle unique de trois caracteres pour une table qui 
comprend de nombreuses entrees. Vous pouvez le faire a la main ou 
utiliser les lettres avec une boucle et un operateur unaire. Nous le verrons 
dans le chapitre Des algorithmes, des outils et des fonctions. Sur deux 
caracteres, vous avez 674 possibilites et sur trois, 17574 combinaisons 
possibles. Pour les chiffres, vous avez respectivement 99 et 999 combi- 
naisons. 
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Les operateurs logiques 



Tab. 3.6 : Les operateurs logiques 






Resultat 


$a and $b ou $a && $b 


AND (et) 


Vrai si $a et $b sont vrais 


$a or $b ou $a | | $b 


OR (ou) 


Vrai si $a ou $b, ou les deux, 
sont vrais 


$a xor $b 


XOR (ou exclusif) 


Vrai si $a ou $b sont vrais, 
mais pas les deux ensemble 


!$a 


NOT (non) 


Vrai si $a est faux 



Attention, && et and n'ont pas la meme precedence, de meme pour | | et 
or, comme nous le voyons ci-dessous. 

Priorite des operateurs 

La priorite specifie la force du lien entre deux membres associes par un 
operateur. Prenons un exemple simple dans les operateurs arithmetiques. 
Le resultat de 8+7*10 sera 78 car la multiplication a priorite sur l'addition, 
done le moteur PHP commencera par multiplier 7 par 10 avant d'addi- 
tionner le resultat avec 8. 

La facon de forcer la priorite et done de resoudre ce probleme est d'aj outer 
des parentheses. Le resultat de (8+7) *10 sera 150. Attention de ne pas 
systematiquement eluder le probleme en ajoutant des parentheses inutiles. 
Si e'est moins elegant, les collections de parentheses peuvent egalement 
devenir illisibles. En cas de doute, la parenthese est plus simple mais d'un 
autre cote, il vaut mieux s'habituer a ecrire un code elegant et a tester ses 
programmes pour detecter les erreurs. Une fois les nuances assimilees, 
vous gagnerez en temps de codage et en lisibilite et aurez la satisfaction 
d' avoir un code elegant et maitrise. 

Voici un tableau representant les operateurs dans un ordre de priorite 
croissante. 
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Tab. 3.7 : Priorite des operateurs 


Associativite 


Operateur 


Gauche 


or 


Gauche 


xor 


Gauche 


and 


Gauche 


print 


Droite 


= +- - *= /- .- %- 


Gauche 


? : 


Gauche 1 1 


Gauche 


&& 


Gauche | 


Gauche 


/\ 


Gauche & 


Non associatif == != === !== 


Non associatif 


<<=>>= 


Gauche 


« » 


Gauche 


+ - . 


Gauche 


* / % 



Droite ! - ++ — (int) (double) (string) (array) @ 



A priorite egale d'operateurs, l'operation est choisie de la gauche vers la 
droite, ou vice versa, selon le cote indique. 

Les operateurs de chaine de caracteres 

II existe deux operateurs . et . = que nous avons deja evoques dans le 
chapitre 2. Vous pouvez egalement les appliquer a des donnees nume- 
riques : 

Listing 3.5 : Operateurs de chafnes de caracteres : chaine_car.php 

<? 

$premier=4; 
$deux=2; 



Double Poche PHP & MySQL • 73 



3 Les clefs du PHP 



$type=gettype($deux) ; 

echo "$deux : $type<br>";//affiche 2 un entier 
$nombre=$premier.$deux; 
$type=gettype($nombre) ; 

echo "$nombre : $type<br>";//affiche 42 une chaTne 
$nombre.=3; 

$type=gettype($nombre) ; 

echo "$nombre : $type<br>"; //affiche 423 une chaTne de caracteres 
$type=gettype($nombre) ; 
$nombre+=$nombre; 
$type=gettype($nombre) ; 

echo "$nombre : $type<br>"; //affiche 846 un entier 

?> 

Avec PHP, les donnees se transforment de maniere transparente. PHP a 
traite ces nombres comme des caracteres qu'il a concatenes. Mais le 
resultat est-il un nombre ou une chaine de caractere ? Ici, nous utilisons la 
fonction get type () pour afficher le type de la donnee. 

Les deux premieres variables sont des entiers. Ensuite, la variable nombre 
devient une chaine de caracteres puis elle redevient un entier. Que de 
metamorphoses ! Le type des donnees peut varier, il depend de l'opera- 
teur. Pour une concatenation, les variables en presence deviennent des 
chaines et dans le cas d'une addition, le chiffre n'est plus un caractere 
mais un nombre. 

3.3 Les structures de contrdle 

Les structures de controle sont caracterisees par des parentheses parfois 
accompagnees d'accolades. Elles evaluent la validite d'une expression et 
decident de l'execution ou non d'une partie du programme. 

Les tests 

Les tests sont declenches par l'expression if ou switch. 
If 

if est un aiguillage. Le moteur PHP, comme un train, suit la ligne du 
programme jusqu'a l'aiguillage qui teste sa variable et en fonction de sa 
reponse, le fait bifurquer dans telle ou telle direction. 
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Voici la forme commune d'un if : 
If (expression vraie utilisant un operateur logique) ( 
Execution 1; 

1 

else ( 

Execution 2 ; 

I 

el se intervient dans tous les autres cas, c'est-a-dire quand l'expression est 
fausse. Si l'expression est vraie, le code inclus dans le bloc else 
materialise par les accolades n' est jamais execute. De la meme facon, si 
l'expression est fausse, le code inclus dans le bloc i f n'est pas execute, 
else n'est pas obligatoire. if, lorsqu'il est seul, se contente de condi- 
tionner une execution de code. Voici deux exemples : 

Listing 3.6 : Combien y-a-t-il de minutes dans une heure ? : heure.php 

<? 

$mn=5; 
$mn*=13; 

echo "1) nombre de minutes : $mn<br>"; 
if ($mn>60){ 

$h=$mn/60; // division par 60 pour avoir les heures 
$mn%=60;// modulo par 60 pour avoir les minutes restantes 
echo "cela fait ${h}h ${mn}mn"; 

echo " (<i>c'est brut!)</ixbr>"; //petit commentai re perfide!!! 

$h=round($h) ; //nous affinons l'affichage 

echo '<font color="#FF0000">$h=round($h) ;</fontxbr>' ; 

echo "cela fait ${h}h ${mn}mn"; 

echo " <i>(un peu de finesse dans un monde de brutes!)</ixbr>"; 
//la ttiaxime de Superprogrammeur !!! 
} 

///////////////fin du if minutes >60/ ////////////////// / 
el se { 

echo "cela fait ${mn}mn<br>"; 

} 

Ce premier exemple est un aiguillage avec deux blocs initialises par i f et 
el se. II est uniquement destine a votre apprentissage car un programmeur 
utiliserait plutot les fonctions d'heure. Remarquez les retraits qui permet- 
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tent de mieux lire le code ainsi que les commentaires, car les accolades 
sont parfois eloignees et il est bon d'y ajouter un commentaire pour les 
preciser. 

Dans le deuxieme exemple, nous allons ameliorer un code precedent : 

$annonce="Fel icitations, vous y etes arrive"; 
if ($sexe=='f ){ 
$genre='e' ; 

} 

$fin_annonce=" , vous gagnez une bouteille de Bourgueil"; 
echo $annonce$genre$f in_annonce; 

Ici, nous n'avons pas besoin de else car si $sexe=='h', la variable 
$genre ne sera pas initialisee et le e n'apparaitra pas. Si la variable 
n'existe pas, PHP ne genere pas d'erreur, ce qui economise du code mais 
peut faire perdre du temps en cas d'erreur. 




Test sur I'operateur == 

Pour un test de validite, si vous utilisez le signe = au lieu du 
signe == a I'interieur de I'expression conditionnelle, cela ne 
provoque aucune erreur mais le code sera toujours execute car vous 
assignez la valeur a la variable au lieu d'en tester la valeur. 



el sei f permet d'ajouter plusieurs possibilites d'aiguillage entre les blocs 
i f et el se. el se est le bloc par defaut, il n'est jamais obligatoire : 



<? 

If ($age<18){ 

Bloc a" instructions 




} 

elseif ($age>=18 && 
Bloc a" instructions 


$age<35) { 


} 

elseif ($age>=35 && 
Bloc d' instructions 
} 


$oge<49) { 


else { 

Bloc d' instructions 




} 

?> 
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Switch 



Maintenant, vous pouvez utiliser switch qui correspond a un bloc if, 
elseif mais avec des valeurs ponctuelles. II ne s'applique pas a des 
valeurs sur des intervalles. Ici les valeurs (1, 2...) sont des codes donnes 
par convention, par exemple dans un menu deroulant a l'interieur d'un 
formulaire, comme nous le verrons dans le prochain chapitre. 

switch ($age) { 
case 1: 

$age="moins de 18 ans"; 

break; 
case 2: 

$age="entre 18 et 35 ans"; 

break; 
case 3: 

$age="entre 35 et 49 ans"; 

break; 
default : 

$age="plus de 49 ans"; 



Si $age est egal a 1, il prend la valeur de moins de 18 ans. Le 
def aul t est la valeur prise par $age s'il n'est egal a aucune des valeurs 
proposees. 



Qu'est-ce qui identifie un langage comme langage de programmation ? La 
boutade est de repondre que ce sont les boucles et nous ne sommes pas 
loin de la verite. Vous etes sur de les utiliser dans vos programmes et bien 
souvent, elles seront au coeur de vos algorithmes. 



Les boucles permettent d'executer un bloc d'instructions autant de fois 
qu'il est necessaire. On utilise un index initialise qui s'incremente a 
chaque boucle. Dans l'intitule, on insere une condition de sortie de boucle. 



3.4 Les boucles 




! Algorithme 

Ensemble des regies operatoires propres a un calcul (extrait 
du dictionnaire Micro-Robert). 
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while (expression est vrai){ 
Bloc instruction 



Vous pouvez utiliser une expression deja initialisee ou en creer une avec 
une nouvelle variable numerique (en general, on l'appelle i comme 
index). Quand vous utilisez un index, il faut obligatoirement trois 
composantes : la valeur initiale, la valeur limite a partir de laquelle la 
valeur n'est plus vraie et la valeur d' incrementation ou de decrementation. 

Nous allons localiser la variable pour que vous saisissiez le moment oil 
elle sort de la boucle. Prenons, par exemple, une personne condamnee a 
douze jours de prison. Elle rentre le l ei mai et sort le 12. Nous utiliserons 
une boucle while. Tant que la variable est dans la boucle, le prisonnier est 
incarcere et la sortie de la boucle correspond a sa levee d'ecrou : 

Listing 3.7 : Boucle while : while. php 

<? 

$1-1; 

$temps=12; //premier jour de tole!!! 
while ($i<$temps) { 
echo "le $i"; 
if ($i==l){ 

echo "<sup>er</sup>" ; 
/*cette balise represente la position superieure en puissance, 
pour celle en indice qui est en une position inferieure, 
utilisez <subx/sub>*/ 
} 

echo " mai, je suis <B>en prison</B>!\" .<br>" ; 

//mettons le en gras 

$i++; 

// Oubliez cette ligne et vous generez une boucle infinie 

} 

echo "<brxb>le $i mai</b>, <i>Je suis <B>1 ibere</B>!</i>" ; 
//enf in je sui s 1 i bre! ! ! 

?> 
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A Figure 3.4 : Une boucle while 

La boucle do ... while 

Cette boucle est la meme que la boucle while mais a la difference de 
while, elle initie un tour avant d'entrer dans la boucle, que la condition 
soit verifiee ou non, car la valeur est testee en fin de boucle. On l'emploie 
peu mais elle est utile parfois pour decrementer ou incrementer une limite 
avant une boucle. 



Notre prisonnier recidive. II est condamne par le juge do . . . et garde par 
le surveillant while. Ici, la boucle est parcourue au moins une fois sans 
que la condition ne soit testee : 

Listing 3.8 : Boucle do... while : do_whileT.php 

<? 

$1-1; 

$temps=12; 
do { 

echo "le $i"; 

if ($i==l){ 

echo "<sup>er</sup>" ; 

} 

echo " juin, je suis <B>en pri son</B>!\" .<br>" ; 
// e'est le mois suivant 
$i++; 

/*Si vous oubliez cette ligne, vous generez une 
boucle infinie */ 

} 

while ($i<$temps); 

echo "<brxb>le $i juin</b>, <i>Je suis <B>1 ibere</B>! .</i>" 
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II aurait du subir sa peine mais imaginons que le voleur ait indemnise la 
victime, il entame un recours mais le temps que la justice tranche... Nous 
initialisons la variable a 17, le jour de son entree : 



Listing 3.9 : Boucle do... while : do_while2.php 

<? 

$i=17; //il entre le 17 juin en prison 

$temps=0; 

do { 

echo "1 e $i " ; 

if ($i==l){ 

echo "<sup>er</sup>" ; 

} 

echo " juin, je suis <B>en pri son</B>!\" .<br>" ; 

// c'est le mois suivant 

$i++; 

//Si vous oubliez cette ligne, vous generez une boucle infinie 

} 

while ($i<$temps) ; 

echo "<brxb>le $i juin</b>, <i>Je suis <B>1 ibere</B>! .</i>"; 



Le point virgule dans le do... while 

N'oubliez pas le point-virgule apres la parenthese du while 
dans la boucle do ... while. 



II passe au moins un jour en prison avec le juge do ... et le surveillant 
whi 1 e, alors qu'il n'en passerait aucun avec le juge whi 1 e. 

En general, avec une valeur d'index, il est preferable d'utiliser la boucle 
for, faite sur mesure, comme nous le voyons ci-dessous. 

La boucle for 

for utilise un compteur qu'elle initialise, limite et incremente afin 
d'executer son bloc d'instructions. Elle concentre les trois lignes separees 
par des points-virgules a l'interieur de sa parenthese : 

for (initialisation ; limite ; incrementation) { 
Bloc d'instructions 
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Notre calendrier bancal va vous permettre de comprendre les possibilites 
de cette boucle for. Nous allons afficher les annees bissextiles qui ont 
pour particularity de contenir 366 jours. Le calendrier occidental actuel, le 
calendrier gregorien, a ete institue en 1582 par le pape Gregoire. Pour 
l'heure d'ete, nous verrons plus loin dans le chapitre. Une annee est 
bissextile si elle est divisible par 4. Les annees de siecle comme 1900 ou 
2000 sont bissextiles si elles sont divisibles par 400. Nous allons utiliser 
l'operateur % (modulo) pour verifier si Fannee est divisible par 4 et le 
siecle par 400. 

Comme vous le voyez, nous initialisons le calendrier a l'an 1582 : 



Listing 3.10 : Les annees bissextilesl : bissextile!. php 

<? 

for ($an=1582;$an<2020;$an++) { 
if ($an%100==0){ 
if ($an%400==0){ 
echo "$an<br>"; 



elseif ($an%4==0){ 
echo "$an<br>"; 




1584 


1588 


1592 


1596 


1600 


1604 


1608 


1612 


1616 


1620 


1624 


1628 


1632 


1636 


1640 


1644 


1648 


1652 


1656 


1660 


1664 


1668 


1672 


1676 


1680 


1684 


1688 


1692 


1696 


1700 


1704 


1708 


1712 


1716 


1720 


1724 


1728 


1732 


1736 


1740 


1744 


1748 


1752 


1756 


1760 


1764 


1768 


1772 


1776 


1780 


1784 


1788 


1792 


1796 


1800 


1804 


1808 


1812 


1816 


1820 


1824 


1828 


1832 


1836 


1840 


1844 


1848 


1852 


1856 


1860 


1864 


1868 


1872 


1876 


1880 


1884 


1888 


1892 


1896 


1900 


1904 


1908 


1912 


1916 


1920 


1924 


1928 


1932 


1936 


1940 


1944 


1948 


1952 


1956 


1960 


1964 


1968 


1972 


1976 


1980 


1984 


1988 


1992 


1996 



2000 2004 2008 2012 2016 
A Figure 3.5 : Les annees bissextiles 
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Le calendrier maya est plus regulier et plus precis mais il ne nous aurait 
pas permis de vous montrer toutes ces subtilites, comme il n'aurait pas 
permis a Michele Morgan, nee un 29 fevrier, de dire qu'elle vieillit quatre 
fois moins vite que la normale. 

II est possible d'ajouter un autre indice dans la boucle for. Ainsi, si nous 
voulons donner le nombre de jours depuis Fan 1582, ajoutons une variable 
$ j avec une virgule. Elle represente le nombre de jours a partir du premier 
janvier 1583 : 

Listing 3.11 : Les annees bissextiles2 : bissextile2.php 

for ($an=1582,$j=0;$an<2020;$an++,$j=$j+365) { 
// remarquez les virgules 

//vous pouvez aussi mettre $j+=365 a la place de $j=$j+365 
if ($an%100==0){ 
if ($an%400==0){ 

echo "$an : $j jours<br>\n" ; 



elseif ($an%4==0){ 

echo "$an : $j jours<br>\n" 



Foreach 

La boucle foreach n'existe qu'a partir de PHP4. Dans PHP3, vous 
utiliserez les fonctions each ... list, foreach est utilise pour parcourir 
les tableaux et en extraire les clefs et les valeurs. Pour vous montrer un 
exemple, nous prendrons les dix premiers departements francais : 

$departements=array( '01 ' => 'Ain', '02' => 'Aisne', '03' => 'Allier', 
'04' => ' Al pes de Haute Provence', '05' => 'Hautes Alpes 1 , '06' => 
' Al pes Man times', '07' => 'Ardeche', '08' => 'Ardennes', '09' => 
'Ariege 1 , '10' => 'Aube'); 

Voici done un nouvel operateur pour creer un tableau =>. Cet operateur est 
specifique aux tableaux et lie la cle a sa valeur. Notez que '01' n'est pas 
un indice numerique mais une chaine de caracteres. Si nous avions ecrit 
' 1 ' , cette cle aurait ete interpretee comme un indice numerique par PHP. 
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Maintenant, nous allons l'afficher : 

Listing 3.12 : Les departements : departements. phf. 

foreach ($departements as $clef=>$val eur) { 
echo "$clef => $val eur<br>\n" ; 

} 

Si vous ne voulez afficher que la valeur : 



foreach ($departements as $valeur){ 

echo " $valeur<br>\n"; 
//Nous avons ajoute \n pour que le code source soye plus beau! 
} 




each list 

Voici maintenant le programme avec while et les fonctions 
list et each, utilises a la place de foreach en PHP3. 

while(list($clef, $val eur)=each ($departements)) { 
echo "$clef => $val eur<br>\n" ; 

} 

//Puis I'affichage uniquement des valeurs 
while (list(, $valeur) = each ($departements) ) { 
echo "$val eur<br>\n" ; 



Comme les developpeurs de PHP ont a cceur d'assurer une compati- 
bility ascendante, cette derniere forme est compatible avec PHP4 mais 
moins elegante. 



Le traitement generique d'un formulaire 

Dans cette partie qui explique la boucle foreach et each... list, 
profitons-en pour creer une application tres simple afin de traiter un 
formulaire. 

Le moteur PHP, quand les donnees d'un formulaire sont envoyees vers 
un fichier PHP, cree un tableau. Si vous utilisez la methode GET, ce seraun 
tableau nomme $HTTP_GET_VARS, pour la methode POST, ce sera $HTTP 
_P0ST_VARS. Pour envoyer les donnees, il suffit de faire une boucle sur le 
tableau : 
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whi 1 e(l i st ($cl ef , $val eur) =each ($HTTP_POST_VARS) ) { 
$message.= "$clef : $valeur\n"; 

} 

mail ("$votre_email","RESULTATS DU FORMULAIRE" , 
"$message" , "f rom: monsite.com") ; 



ou avec fo reach en HTML : 



foreach($HTTP_POST_VARS as $cl ef=>$val eur) { 
$message.= "$clef : $valeur<br>\n"; 

} 

mail ("$votre_email","RESULTATS DU FORMULAIRE" , 
"$message" , "f rom: monsite.com") ; 



Vous recevrez toutes les donnees du formulaire. Si certaines sont inutiles, 
il vous suffit d'ajouter dans la boucle : 



Listing 3.13 : Traitement pour tout formulaire . 

traitement_form_generic.php 

if ($clef="submit" || $cl ef ="method") { 
conti nue; 

} 



Pour les tableaux $HTTP_POST_VARS et $HTTP_GET_VARS, voyez le 
chapitre L'internaute est d'abord une personne. 

Break et continue 

break permet de sortir de la boucle et continue perpetue la boucle en 
coupant l'execution du bloc pendant le tour courant. 

break permet de s'abstenir de limite superieure dans la parenthese de for 
car c'est break qui fixe cette limite a 2020 : 




Listing 3.14 : Les annees bissextiles3 : bissextile3.php 

<? 

for ($an=1582; ;$an++){ 

/* ici nous laissons la limite superieure en blanc car 
1 ' instruction break va nous faire sortir de la boucle 
quand $an est egal a 2021 */ 
if ($an==2021){ 
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break; 

} 

elseif ($an%100==0){ 
if ($an%400==0){ 
echo "$an<br>"; 



elseif ($an%4==0){ 
echo "$an<br>"; 

} 

} 

?> 

Reprenons l'exemple etudie dans la partie sur la boucle for. Au lieu de 
faire une condition pour inscrire Fannee bissextile, nous allons definir 
une condition pour court-circuiter cette instruction avec la commande 
continue : 

Listing 3.15 : Les annees bissextiles4 : bissextile4.php 

<? 

for ($an=1582;$an<2020;$an++) { 
if ($an%100==0){ 
if ($an%400>0){ 
/////////si l'annee n'est pas divisible par 400// 
continue; 



elseif ($an%4>0){ 
///ni par 4 
continue; 

} 

echo "$an<br>"; 

} 

?> 



3.5 Les fonctions de PHP 

Vous avez ici le catalogue des fonctions les plus courantes de PHP. Pour 
les autres, vous pourrez consulter le manuel en ligne (voir annexe). Le but 
n'est pas de reproduire la documentation du langage PHP mais de vous 
proposer les fonctions les plus utiles. 
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Chaines de caracteres 

Comme le type string est le type principal en PHP, vous serez souvent 
amene a utiliser les fonctions qui manipulent les chaines de caracteres. En 
voici quelques unes : 



Tab. 3.8 : Les principales chalnes de caracteres 


Fonction 


Exemple 


Description 


addSl ashes () 


$a=addSl ashes ($a) ; 


Ajoute des caracteres 
d'echappement. 


htmlentitiesO 


$a=html entities 
($a); 


Convertit les caracteres locaux en 
caracteres HTML, par exemple e en 
é. 


strip tags() 


$texte=strip tags 
($texte) 


Enleve les balises HTML et PHP. 


stripSlashes() 


$a=stripSlashes 
($b); 


Enleve les caracteres 
d'echappement. 


strlen() 


$nombre=strlen($a) ; 


Retourne la longueur de la chame. 


substr() 


$b=substr($a,0,2) 


Retourne une sous-chame a partir 
d'une chaine. 


trim() 


$a=trim($a) ; 


Enleve les espaces blancs qui 
encadrent la chame. 



htmlentitiesO 

Nous vous conseillons d' utiliser cette fonction le moins possible car les 
navigateurs lisent tres bien les caracteres accentues, cela pour plusieurs 
raisons : le strtoupper() d'un caractere accentue cree une capitale 
accentuee. N'essayez pas par contre de mettre un caractere HTML en 
majuscule (exemple : é devient &EACUTE; et non E). 

Si vous transformez le resultat d'un formulaire avec htmlentitiesO, 
vous serez oblige de faire l'operation contraire quand vous restituerez les 
donnees a l'interieur d'un champ, dans le cas d'une modification des 
donnees, encore du code inutile. 
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Nous le verrons dans le chapitre intitule L'internaute estd'abord 
une personne. 



trimO 

Vous utiliserez trim() pour une authentification afin que le mot de passe 
saisi soit debarrasse de tout caractere espace, avant ou apres. Quand 
Finternaute entre des donnees, il utilise parfois la fonction couper/coller. 
Des espaces supplementaires peuvent alors s'y inserer comme passagers 
clandestins. 

addSlashesO et stripSlashesO 

Utilisez, comme nous l'avons vu precedemment la fonction phpinfoQ 
pour voir la configuration du serveur. Si magi c_quotes_gpc est sur On, 
vous n'aurez pas besoin d'ajouter des caracteres d'echappement a vos 
requetes SQL. PHP les ajoutera automatiquement devant ", ' , \ et NULL. 
Par contre, si magi c_quotes_runtime est sur On, vous devrez les enlever 
avec stripSlashesO, a chaque fois que vous extrairez des donnees de 
votre base MySQL ou autre. 

Strlen 

Vous utiliserez strlenQ pour tester si vous affichez des donnees sur 
une page : 

if ($fax){ 

echo "Fax : $fax"; 

} 

Ici, evidemment, vous n' affichez pas une ligne Fax si la personne n'a pas 
de fax. 

substrO 

Cette fonction vous permet d'extraire une chaine de l'interieur d'une 
chame. La premiere lettre est a l'indice 0. 
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Vous pouvez par exemple epeler un nom : 

$nom="Baudel ai re" ; 
$nombre_l ettre=strl en ($nom) ; 
for ($i=0;$i<$nombre_lettre;$i++) { 

$lettre=substr($nom,$i ,1) ; 

echo "$lettre"; 

if ($i==$nombre_lettre-l) { 
echo 

} 

el se { 

echo ", "; 

} 

} 

Vous pouvez egalement faire plus simple : 

Listing 3.16 : Epeler Baudelaire : epeler_mot.php 

$nom="Baudel ai re" ; 
$nombre_l ettre=strl en ($nom) ; 
for ($i=0;$i<$nombre_lettre;$i++) { 

$lettre=$nom[$i] ; 

echo "$lettre"; 

if ($i==$nombre_lettre-l) { 
echo 

} 

else { 

echo ", "; 

} 

} 

Nous avons substitue $1 ettre=$nom[$i] ; a $lettre 
=Substr($nom,$i,l); ce qui prouve que les chaines de caracteres sont 
des tableaux. Cette substitution n'aurait pas pu avoir lieu si nous avions 
extrait plus d'un caractere a chaque boucle (voir fig. 3.6). 

Deux fonctions liees a la date et a l'heure sont tres utiles. Pour ordonner 
des dates, il est pratique de les presenter sous la forme AAAAMMJJ ou 
AAAAMMJJHHMM. Ainsi, les dates les plus recentes composent un 
chiffre plus eleve. Nous allons elaborer deux fonctions de conversion de 
AAAAMMJJ a JJ/MM/AAAA et vice versa : 



88 • Double Poche PHP & MySQL 



Les fonctions de PHP 



Poete, epelez votre nom! - Netscape 



Fichter Edition Affichage Alter Communicator 



Precedent Rechargef Accueil Rechercher Guide ImHl 

.^,1" Signets .4 Adresse:|nsvivants/essai/epeler_motphp Infos connexes 

§ Internet § Nouveautes § Sites interessa §1 Membres §| Connexions g Ma 



>, a, u, d, e, I, a, i, r, e. 



», a, u, d, e, I, a, i, r, e. 



Document: charge 



▲ Figure 3.6 : Epelez votre nom 



function nombre_date($cettedate) { 
$1 adate=$cettedate; 
$an=substr($ladate,0,4) ; 
$mois=(int)substr($ladate,4,2) ; 
$jour=(int)substr($ladate,6,2) ; 
$1 adate=$jour. '/' .$mois. '/' .$an; 
if ($1 ongueur>8) { 

$heure= (int)substr($ladate,8,2) ; 
$minutes= substr($l adate, 10,2) ; 
$ladate.=" ${heure}h ${minutes}mn"; 
if ($longueur>12) { 

$secondes= substr($l adate, 12,2) ; 
$ladate.=" $secondes"; 

} 

} 

return $ladate; 

} 

?> 



Nous verifions, dans cette fonction, la longueur de la date et, selon la 
taille, en extrayons aussi l'heure, les minutes et les secondes. Les jours, 
mois et heures sont forces en i nt (typees) car nous voulons eviter qu'ils 
commencent par un 0 : 



<? 

function date_nombre($cettedate) { 
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$1 adate=$cettedate; 
$ladate=explode( '/' ,$ladate) ; 
$jour=$ladate[0] ; 
$mois=$ladate[l] ; 
$an=$ladate[2] ; 
$longueur=strlen($an) ; 
if ($longueur==2) { 
if ($an>date("y")) { 
$an=' 19' .$an; 

} 

el se { 

$an='20' .$an; 

} 

} 

$longueur=strlen($mois) ; 
if ($1 ongueur==l) { 
$mois='0' . $mois; 

} 

$ladate=$an.$mois.$jour; 
return $ladate; 

} 

?> 

Cette fonction cree d'abord un tableau a partir des elements delimites par 
une barre oblique avec la fonction exp 1 ode ( ) . Puis nous verifions la taille 
de chaque element pour ajouter un 0 devant, en cas de besoin. 



Autres fonctions 

Voici d' autres fonctions de chames de caracteres qui simplifient votre 
application. 



Tab. 3.9: D'autres fonctions de chames de caracteres 


Fonction 


Exemple 


Description 


chop() 


$a=chop($a) ; 


Debarrasse la chame des espaces 
finaux. 


explode() 


$tableau=explode(' 
', $a); 


Cree un tableau de lettres separees 
par un caractere. 


implodeO 


$a=implode(' ', 
$tabl eau) ; 


Retourne une chame a partir d'un 
tableau en y inserant un caractere 
de separation. 


nl2br() 


$a=nl2br($a) ; 


Adjoint aux caracteres de nouvelle 
ligne des balises <BR>. 
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Tab. 3.9 : D'autres fonctions de chaines de caracteres 


Fonction 


Exemple 


Description 


str replace() 


$a=str replace($b, 
$c, $a) 


Remplace une sous-chame par une 
autre dans une chame. 


strip tags() 


$texte=strip tags 
($texte) 


Enleve les balises HTML et PHP. 


strtol ower() 


$a=strtolower($a) ; 


Met la chaine en bas de casse 


strtoupper() 


$a= strtoupper 
($a); 


Met la chame en capitales. 


ucfirst() 


$a=ucfirst($a) ; 


Met le premier caractere du mot en 
capitale. 



ucwordsO $a=ucwords($a) ; Met le premier caractere de chaque 

mot en capitale. 



Variables 

Les variables servent souvent de temoins dans vos applications et decident, 
selon leur existence ou leur valeur, de l'execution d'un bloc de code. 



Tab. 3.10 : Les variables 



Fonction 


Description 


empty () 


Evalue si la variable est non initialised ou egale a 0. 


isset() 


Evalue si la variable est initialises. 


unset() 


Desaffecte la variable. 


gettype() 


Retourne le type de la variable. 


is array () 


Evalue si la variable est de type tableau. 



Date et heure 

Dans des applications interactives, vous appellerez souvent les fonctions 
de date et d'heure pour afficher l'heure et la date, soumettre une 
information a une date d'expiration, ordonner des listes en fonction de 
leur date, etc. 
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Tab. 3.11 : Les fonctions de date et heure 


Fonction 


Description 


string date (string format [, int 
timestamp] ) 


Formate un timestamp en annee, mois, 
jour (timestamp : nombre de secondes 
depuis le 1/1/70). 


array getdate ([int timestamp]) 


Decompose un timestamp en annee, 
mois, jour ... qu'il distribue dans un 
tableau. 


string microtime () 


Retourne un millionieme de seconde 
accompagne du timestamp. 


int mktime (int heure, int minute, 
int seconde, int mois, int jour, 
int annee [, int is dst]) 


Fabrique un timestamp a partir d'une 
date. 


string strftime (string format [, 
int timestamp]) 


Formate une date a I'aide des parametres 
locaux. 


int time() 


Retourne le timestamp courant. 


string gmdate (string format [, 
int timestamp]) 


Fonction date() pour le temps GMT 


int gmmktime (int heure, int 
minute, int seconde, int mois, int 
jour, int annee [, int is dst]) 


Fonction mktime pour le temps GMT, 
i s dst est sur 1 si c'est une heure d'ete. 


string gmstrftime (string format 
[, int timestamp]) 


Fonction strftime pour le temps GMT 



Formatage pour la fonction dateO 

La fonction date() utilise un code pour formater un timestamp : 



Tab. 3.12 : Les codes de formatage de la fonction date() 


Description 


Option 


Annee en deux chiffres 


y 


Annee en quatre chiffres 


Y 


Mois precede d'un zero comme "01" ou "02" 


m 


Mois sans adjonction de zero comme "1 ", "1 2" 


n 
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Tab. 3.12 : Les codes de formatage de la fonction date() 


Description 




Jour de I'annee comme "0" ou "335" 


z 


Jour du mois a deux chiffres (avec un 0) 


d 


Jour du mois sans adjonction de 0 comme "2", "30" 


j 


Jour numerique de la semaine (dimanche est 0 et samedi, 6) 


w 


Heure au format 12 precedee au besoin d'un zero comme "01" 


h 


Maura qii fnrmQ+ 10 cone aHinno+inn Ha Tarn onmma "0" "11" 
ncUlc all lUlllldl \L bdllb dUJUIIl/UUII Uc ZclU LUIIIIIIc L . II 


9 


Uaiira qii fnrmcit OA nrat^oriao qii haonin H'nn 7orn rnnima "01" "00" 
ncUlc dU IUI MldL L L \ Ul cLUUcc dU UcbUIII U Ull ZclU LUIIIIIIc U I , c\j 


H 


Uaiira qii fnrmcit OA cane QHinnr+inn Ha 7ari*\ r*n m m a "O" "IK" 
ncUlc dU lUlllldL L L \ bdllb dUJUIIUUUII Uc ZclU LUIIIIIIc L , 10 


G 


Q.m nil nm ^anta mariHiam nil nnct mariHiam ■ auant mirli nn anrac 
dill UU |JIM ^dlllc IIICllUIClll UU UUbL IIIcIIUIcIII . dvdllL IIIIUI UU dfjlcb 

midi) 


a 


l\/liniitoe Ho "00" q "^Q" 
IVIIIIULcb Uc UU d at/ 


i 


Secondes de "00" a "59" 


s 


Difference avec I'heure de Greenwich en heures comme "+0200" 


0 


Difference avec I'heure de Greenwich en secondes comme "+3600" 

nn "-7900" 
UU / Z\UU 


Z 


l\h imorn Ha Iq oamQina Hone I'innaa /Iq cflmoino ffimmanr'Qnt iin 
IMUIIIclU Uc Id bcllldlllc Udllb 1 dllllce [\a bcllldlllc LU 1 1 II I lei lUdl 1 L Ull 

lundi) 


W 


+ nmoc-4-amn H'llniv 1 n Am hra Ho capnnnoe Hani i ic Iq l/l/IOVD^ 
L 1 ITlcS L d[Tip U UlllA ^MUMIUIc Uc bcuUMUcb UcpUib Ic 1/ 1/ ly/UJ 


U 


Nombre de jours dans le mois 


t 


Annee bissextile si e'est egal a 1 , sinon 0 


L 


Numero de la semaine dans I'annee (la premiere semaine 
commengant un lundi) 


W 


Norn du fuseau horaire sur lequel la machine est reglee, comme par 
exemple (CET) 


T 


Dayl ight Savings Time : 1 si e'est en periode d'heure d'ete, 
sinon 0 


I 


Norn du fuseau horaire sur lequel la machine est reglee, comme 
(CET) 


T 
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A la fin de ce chapitre, une application vous permet d'afficher indiffe- 
remment votre heure, que ce soit en ete ou en hiver, sans avoir de 
manipulation a faire. Cette application est pratique si votre serveur n'est 
pas dans votre pays car vous n'allez pas guetter l'heure pour la changer a 
1 heure du matin un dimanche. Nous vous l'exposerons une fois que vous 
aurez appris a creer des fonctions. En voici le resultat : 



$j C'est quel jour ? - Netscape 



a ra ^. *s 

Precedent Recharger Accueil Rechercher Guide Im 

"Signets Jti. Adresse:|ciubbonsvi vants/essai/date php -r | ®* Infos connexes 



Ficher Edition Afftehage Aller Communicator ? 



2 



'I g Internet g Nouveaules g Sites interessa g Membres jj Connexions § Ma 



vendredi 3 mai 2002 
10H06 



Document: charge 



▲ Figure 3.7: Date et heure 

strf time () formate une date en tenant compte des parametres locaux de 
setlocaleQ. 



Tab. 3.13 : Le code de formatage de la function strftimeQ 


Description 


Option 


Annee sur deux chiffres 


%y 


Annee sur quatre chiffres 


%Y 


Date 


%x 


Date et heure 


%c 


Heure 


%X 


Heure notee am ou pm 


%p 
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Tab. 3.13 : Le code de formatage de la fonction strftimeQ 


Description 


Option 


Heure notee de 00 a 23 


%H 


Heure notee de 01 a 12 


%I 


Minute a deux chiffres 


%M 


Seconde a deux chiffres 


%S 


Jour de la semaine (le dimanche correspond a 0) 


%w 


Jour de la semaine (nom abrege) 


%a 


Jour de la semaine (nom complet) 


%A 


Jour du mois de 00 a 31 


%d 


Jour de I'annee 001 a 366 


%j 


Mois (nom abrege) 


%b 


Mois (nom complet) 


%B 


Mois de 1 a 12 


%ra 


Numero de la semaine (I'annee debute par un dimanche) 


%u 


Numero de la semaine (I'annee debute par un lundi) 


%w 


Fuseau horaire 


%z 



Caractere % 



Mathematiques 
La valeur PI 



Tab. 3.14 : Valeurs mathematiques 


Constante ou 
fonction 


Valeur 


Description 


M_PI 


3.1415926535898 


Constante avec une valeur 
approximative en 14 decimales 


pi() 


3.1415926535898 


Fonction identique 



Double Poche PHP & MySQL • 95 



3 Les clefs du PHP 



Les nombres pseudo-aleatoires 

Ces nombres sont qualifies de pseudo-aleatoires car ils sont generes par 
une simulation, a partir d'un algorithme mathematique. Ces fonctions 
generent des sequences temporelles de chiffres. 



Tab. 3.15: Nombres pseudo-aleatoires 






int rand ([int minimum], [int 
maximum]) 


Entier aleatoire dans I'intervalle 
[0 . . RAND_MAX] 


void srand (int graine) 


Equivalent de rand mais generant les 
nombres avec une graine 



Voici un petit programme pour generer un mot de passe aleatoire : 

Listing 3.17 : Creation d'un mot de passe aleatoire : motdepasse.php 

<? 

$alphabet = "abcdefghjkmnopqrstuvwxyz"; 
$alphabet .= "ABCDEFGHJKLMNOPQRSTUVWXYZ" ; 
$alphabet .= "123456789"; 

/* vous remarquerez que certains elements ont ete omis pour 
ne pas creer d ' ambigui' tes comme le chiffre 0 ou la 
minuscule 1 ou la majuscule I */ 

$nbcar = 11; $i = 0;$motdepasse = ""; 

// tail 1 e du mot de passe 11 caracteres et initialisation 

srand ((double) microti me 0*1000000) ; 

/* initialisation du hasard avec le moment en microsecondes. 
Vous avez remarque que le type a ete force sinon nous aurions 
un entier qui serait egal a 0. La microseconde a une 
precision a 1/1 000 000. Ici vous plantez une graine qui est 
differente de 999999 autres graines possibles*/ 

while ($i<$nbcar) { 

$valcar = rand(0, strlen ($al phabet)) ; 
$motdepasse .= substr($alphabet,$valcar,l) ; 
$i++; 

1 

/*boucle pour generer les 11 caracteres du mot de passe 

par concatenation*/ 

?> 
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d° Document: charge 





A Figure 3.8 : Mot de passe 



3.6 Les fonctions 

La fonction est une unite de programme enfermee a l'interieur d'accolades 
avec comme entree, des parentheses. Nous verrons cependant qu'une 
variable declaree gl obal peut agir a l'interieur de la fonction. 

Le role de la fonction 

En PHP, vous pouvez utiliser des fonctions c'est-a-dire de petits program- 
mes dedies a une tache. Une fonction est autonome, elle recoit ou non des 
parametres et execute son code, puis retourne le resultat a l'expression qui 
l'a appelee. 

L'interet de ces programmes est que vous n'avez pas besoin de faire a 
chaque fois un couper/coller dans vos applications pour recuperer ces 
petits morceaux de programme, il vous suffit de les appeler. Ainsi, vos 
programmes sont plus lisibles. Quand vous traitez une variable dans une 
fonction, vous n'avez pas besoin de connaitre le nom de la variable 
utilisee par la fonction. 

Ici, nous creerons une fonction qui nous servira plus loin. Si vous voulez 
rendre votre site web interactif, invitez les visiteurs a s'inscrire dans votre 
club. Vous leur demandez leur nom et prenom et les remerciez ensuite. 
Vous souhaitez que votre site ait l'air professionnel, mais parfois, les 
personnes ne mettent pas leur nom en majuscules, ce qui fait desordre 
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quand vous les nommez dans les remerciements. Et puis le francais n'est 
pas simple et vous ne voulez pas vous facher pour un nom ecorche. La 
solution est d'y penser tout de suite pour ne plus y revenir. Vous 
fabriquerez done une fonction traitant les noms de famille qui necessitent 
des capitales. 

Voici la fonction que nous vous engageons a mettre dans un fichier 
fonctions.inc.php. Nous verrons au cours du chapitre 4 comment l'utiliser 
dans un programme : 

functi on majuscul es ($majuscul e) { 

$majuscul e=trim($majuscul e) ; 

$maj uscul e=strtol ower($majuscul e) ; 

$majuscul e=str_repl ace("d '" , "d 1 " ,$maj uscul e) ; 

$passage=l; 

///vous pouvez ajouter d'autres separateurs dans le tableau/// 
$motif[]=" "; 
$motif []="-"; 
$nombre=count($motif) ; 

Nous avons fourni les variables avec des valeurs. Nous allons signaler les 
differentes etapes avec le marqueur $passage. La boucle testera les 
separateurs de mots pour verifier qu'ils sont presents dans le parametre 
fourni ($maj uscul e) . La variable $nom_compl et sert temporairement de 
transport aux elements du nom decompose. Une fois qu'elle a servi, elle 
rend son butin et s' efface avec la fonction unset () : 

for ($i=0;$i<$nombre;$i++) { 
$particule=$motif [$i] ; 
if (ereg($parti cul e,$majuscul e) ) { 
if ($passage==2) { 

$maj uscul e=$nom_compl et ; 
unset ($nom_compl et) ; 

} 

$passage=2; 

$maj uscul es=spl i t ($parti cul e,$majuscul e) ; 
$combien=count($maj uscul es) ; 

Cette boucle for nichee dans la boucle principale gere les troncons du 
nom coupe par le separateur en mettant la premiere lettre en capitale. 

for ($j=0;$j<$combien;$j++) { 
$maj=$maj uscul es [$j] ; 
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Nous placons la premiere lettre de chaque troncon en majuscule, sauf pour 
ces mots-la : 



if ($maj ! = ' de ' && $maj !='d\' ' 


&& $maj!='et' && 






$maj=ucfi rst($maj) ; 

} 





Nous reconstituons le nom complet au fil des boucles avec $nom_compl et 
qui ne sert qu'au transport et qui, apres une serie de transformations, 
restitue sa valeur a la variable $majuscule : 



$nom_compl et . =$maj ; 
if ($j<$combien-l) { 

$nom_compl et . =$parti cul e; 

} 

Tant que nous n'en sommes pas au dernier troncon, nous ajoutons le 
separateur : 

Listing 3.18 : Mettre un nom en majuscules : majuscules.php 

) 

/////FIN DU PLUS PETIT FOR////////// 
} 

////FIN DES MOTS QUI POSSEDENT UN SEPARATEUR " " ou -/////// 
} 

///////FIN DU PLUS GRAND FOR///////// 
i f ($passage==l) { 

$majuscul e=ucf i rst ($majuscul e) ; 

} 

elseif ($passage==2) { 

$maj uscul e=$nom_compl et ; 

} 

//RESTITUTION DE LA VALEUR/// 
unset ($nom_compl et) ; 

///DESTRUCTION DU VEHICULE AVEC UNSET//// 

$majuscul e=str_repl ace("d ' ", "d "' ,$majuscul e) ; 
////elision de 1 'espace supplemental re pour d 1 /// 

return $majuscule; 

} 
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La fonction commence par le mot-cle function. Ensuite, trim() enleve 
les espaces eventuels qui encadreraient le nom puis met la chaine en bas 
de casse. Le str_repl ace () est present pour introduire une astuce car un 
nom a particule peut etre compose d'un de ou d ' qui ne prend pas de 
capitales. Ici, la fonction introduit un espace apres d' pour l'assimiler a 
de. II suffira ensuite de retirer l'espace pour que le nom soit correct. 

Les lignes qui suivent inserent les separateurs (ici espace ou tiret) dans 
un tableau. II est possible d'ajouter des separateurs car la fonction 
count () qui suit donne le nombre d'elements, done de boucles a faire 
pour traiter le nom. 

Nous entrons dans deux boucles, la premiere va traiter le nom en regard 
de chaque separateur insere dans le tableau. La deuxieme est imbriquee 
dans la premiere, elle intervient pour traiter les troncons de noms avant de 
les reconstituer. A chaque tour de la grande boucle, il est necessaire de 
vider la variable de sa valeur de resultat, pour eviter plusieurs concate- 
nations du meme nom d'un separateur a Fautre. Pour cela le marqueur 
Spassage se revele necessaire. 



N'ecorchez pas mon nom, je vous prie - Nets... _ l~l X 



Renter Edition Affthage Alter Communicator 

Precedent Recharger Accueil 

Signets Adresse:| s /essai/majuscules.php 



I 

| § Internet §1 Nouveautes 3 Sites interessa 3 Membres 3 Connexions 



Rechercher Guide 
^P* Infos connexes 



jean-edouard poivre d'inde de paprika 
Jean-Edouard Poivre d'inde de Paprika 



Document: charge 



k Figure 3.9 : Mettre en majuscules 



Reportez-vous au chapitre Moteurs de recherche et expres- 
sions rationnelles pour les expressions rationnelles incluses 
dans cette fonction. 
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La portee d'une variable dans une fonction 

Une variable a l'exterieur d'une fonction possede une portee limitee a la 
peripheric de la fonction, c'est-a-dire que la variable n'existe pas dans ce 
perimetre. Seuls un ou plusieurs parametres seront envoyes dans la 
fonction par 1' intermediate des parentheses, mais le nom de la variable 
n'a aucune importance. C'est d'ailleurs ce qui fait son interet. 

Parfois cependant, il est interessant de recuperer une variable qui existe 
dans la meme page en dehors de la fonction. Pour cela, il est possible 
d'utiliser le mot-cle gl obal afin que la portee de la variable se situant a 
l'exterieur de la fonction soit etendue a toute la page. 

Dans l'exemple cite precedemment, il est possible de mettre les separa- 
teurs avant la fonction pour une meilleure visibilite : 

$motif □=" "; 
$motif []="-"; 

Ensuite, dans la fonction vous declarez : 
global $motif; 

Ainsi, la fonction pourra utiliser le tableau $moti f meme s'il est situe a 
l'exterieur de la fonction. Precede du mot gl obal , il est operationnel dans 
la fonction. 



£l Mefiez-vous des variables globales 

Si vous modifiez votre variable et que vous avez oublie 
qu'elle est operante dans la fonction, vous risquez d'avoir une 
surprise dont il sera difficile de deceler la cause. 



Les fonctions imbriquees 



II est interessant, parfois, de creer une fonction pour appeler plusieurs 
fonctions. Ainsi, lorsque vous relirez votre programme, vous obtiendrez 
une sorte de hierarchie de fonctions. 
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Nous pourrions avoir, par exemple : 

function verif_id ($login, $motdepasse, Stable) { 
connexion_base() ; 

recherche_dans_table($table, $1 ogi n , $motdepasse) ; 

} 



Les fonctions recursives 

Une fonction peut s'appeler elle-meme, de fa9on recursive. Nous allons le 
voir avec une suite de Fibonacci. Pour la petite histoire, Leonardo 
Fibonacci etait un moine italien qui vivait 250 ans avant Leonard de Vinci. 
II avait remarque que les vegetaux respectaient une suite dans leur 
croissance. Ainsi, les petales de fleurs ou les feuilles sur les arbres 
observaient une sorte de regie. II en fit une fonction mafhematique. Cette 
fonction genere un nombre en faisant la somme des deux precedents. Les 
deux premiers sont 0 et 1 puis 0+1 = 1; 1+1=2; 2+1=3 ; 3+2=5... Si vous 
continuez, vous parviendrez rapidement a des nombres vertigineux. 

Voici la fonction : 

Listing 3.19 : Fonction suite de Fibonacci fibonacci.php 

<? 

function fibonacci ($nombre){ 
if ($nombre<0) { 
return (0) ; 

} 

el sei f ($nombre<2) { 
return ($nombre) ; 

} 

return fibonacci ($nombre-l)+fibonacci ($nombre-2) ; 

} 

for ($i=0;$i<20;$i++) { 

$nouveau_nombre=f i bonacci ($i ) ; 
echo $nouveau_nombre; 
echo '<br>' ; 

} 

?> 

Les deux premiers tests avec if et el sei f concernent les deux premiers 
nombres qu'il faut generer, puis la fonction s'appelle deux fois et retourne 
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le resultat. La boucle for est la pour creer la liste des nombres obtenus. 
Le calcul au-dela de 30 depend de la capacite de votre machine. 



Fibonacci, la suite! - Netscape 



W*r fctlton (vrcnage Aler Communicator ? 

PiAcMad Racharger Actual Rachaichai GuMlt knpmai SacurM 

] ^f'5<0»ab A |n*>/,'12700 l l Ck*boo»vr».nt.,'«»»« t '»b«n»((iphp 

j B ha—ai gtaawwaaata J 8a— In*— ea J Umtmm J Coaaaatw J MawM 

0112358 13 21 
34 55 89 144 233 377 610 987 
1597 2584 4181 6765 10946 17711 28657 46368 
75025 121393 196418 

Fatal error: Maximum execution time of 30 seconds 
exceeded in c:\clubbonsvivants\essai\fibonacci.php on 
line 19 t 



A Figure 3.10: La fonction de Fibonacci 

Afficher vos date et heure locales 

Le programme propose ici est l'occasion de revoir des fonctions imbri- 
quees ainsi que d'autres notions telles que les dates, les tableaux et 
Foperateur de controle d'erreur. 

Pour afficher le jour de la semaine en francais, nous creons un tableau car 
le jour est un nombre de 0 a 6 en partant du dimanche. Le parametre 
envoye $moment est un timestamp que nous calculons avant l'appel. 
Nous tenons compte du decalage avec l'heure GMT pendant l'heure 
d'hiver. L'heure d'hiver commence le dernier dimanche d'octobre a lh 
GMT et finit le dernier dimanche de mars a lh GMT. 



<? 




function affiche jour($moment) { 




$jour=date("w" , $moment) ; 




$les jours=array( 1 dimanche ' , 'lundi 1 , 


'mardi ' , 'mercredi ' , 


' jeudi ' , 'vendredi ' , 


' samedi ' ) ; 


$jour=$les jours [$jour] ; 




return $jour; 

} 
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Cette fonction af f i che_moi s () affiche le mois en francais (pas de 
capitales en francais). 

function af f i chejnoi s ($moment) { 

$mois=date("n", $moment) ;//le mois sans 0 devant 
$les_moi s=array( ' ' , 'janvier', 'fevrier', 'mars', 

'avril 1 , 'mai ' , 'juin 1 , 'juillet 1 , 

' aout', 'septembre', 'octobre', 

'novembre', 'decembre'); 
$mois=$les_mois[$mois] ; 
return $mois; 

} 

Voici maintenant la fonction principale qui contient l'algorithme et 
appelle les autres fonctions pour se nourrir : 

function af f i che_date_local e($moment) ( 
$decalage_hiver=l; 

Nous verifions d'abord si un parametre a ete envoye. Si ce n'est pas le cas, 
nous prenons le TIMESTAMP Unix courant : 

if ( !$moment) { 
$temps=time() ; 

} 

else { 

$temps=$moment; 

} 

Nous creons les TIMESTAMP Unix des moments du changement d'heure 
pour l'annee en cours en heure GMT. II suffit de trouver le jour de semaine 
du 31 mars, puis en sachant que le dimanche est un jour 0, d'enlever le 
nombre du jour de semaine a 3 1 pour obtenir la date : 

$jourdesemaine=gmdate("w" , mktime(l ,0,0, 3,31,gmdate("Y") ) ) ; 
//variable pour connaitre le jour de semaine du 31 mars 

$1 imi te_inf=mkti me (1,0,0, 3,31-$jourdesemaine,gmdate("Y") ) ; 
/*variable pour trouver le dernier dimanche de mars pour l'annee 
courante*/ 

$jourdesemaine=gmdate("w" , mkti me (1,0,0, 10,31,gmdate("Y")) ) ; 
/*variable pour connaitre le jour de semaine du 31 octobre*/ 

$1 imi te_sup=mkti me (1,0,0, 10,31-$jourdesemaine,gmdate("Y")) ; 
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/*variable pour trouver le dernier dimanche d'octobre pour I'annee 
courante*/ 

Maintenant, nous testons la date pour savoir si elle est comprise entre les 
deux limites. Dans ce cas, elle est en heure d'ete : 

if ($temps>$l imite_inf && $temps<$l imite_sup) { 
$decal age=$decal age_hi ver+1; 

} 

el se { 

$decal age=$decal age_hi ver; 

} 

$moment=mktime(gmdate("G")+$decal age,gmdate("i ") ,0, 
gmdate("n") ,gmdate("j") ,gmdate("Y")) ; 

Enfin, nous fabriquons le timestamp avec mktime(), en incluant le 
decalage avec V heure GMT : 

Listing 3.20 : Fonctions d'affichage de date : date.php 

$ladate=affiche_jour($moment) ." ".date("j", $moment) . " ". 

affiche_mois($moment) ." ". date("Y", $moment) ; 
/*la date inclut le mois en frangais grace a l'appel de 
la fonction.*/ 

$heure = date("G" ,$moment) ; 

$minute = date("i", $moment) ; 

$ladate.="<BR>"; 

$1 adate.="$heure" ; 

$ladate.="h"; 

$ladate.="$minute"; 

return $ladate; 

} 

echo @affiche_date_locale() ; 

/*Vous faites preceder la fonction du @ pour eviter le 
message d'erreur si vous n'envoyez pas de parametre*/ 
?> 



3.7 Recapitulatif pour votre application 

Vous avez cree un fichier fonctions. inc. php dans lequel vous avez insere 
votre fonction majuscul es () . Maintenant, vous allez si vous le desirez y 
inserer les fonctions date_nombre(), nombre_date(), af f i che_date 
_locale(), affiche_mois() et affiche_jour(). Nous vous encoura- 
geons a les modifier comme bon vous semble, pour les adapter dans leur 
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forme d'affichage ou leur contenu. Si vous vivez a Montreal et que votre 
serveur est sur un autre fuseau horaire, votre decalage avec l'heure GMT 
sera plutot -5 en hiver que +1, etc. 

Nous verrons dans le chapitre 4 comment inserer ces fonctions dans les 
fichiers de votre application avec une seule ligne de code. Apres la cloture 
de ce chapitre, nous etudierons le traitement des formulaires et leur 
verification. 
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Nous allons bientot pouvoir nous aventurer en ligne. Mais avant cela, 
revenons a notre internaute qui souhaite creer son club des Bon Vivants. 
II va lui falloir mettre de l'ordre dans ses idees car avec MySQL, il passe 
a la vitesse supeiieure. 

MySQL a ete creee par Michael Widenius de la societe TcX, en reaction a 
certaines insuffisances de la base de donnees mSQL. La version 1.0 sort en 
mai 1995. Son createur decide de la distribuer gratuitement via Internet. 

L'emploi d'une base de donnees est lie a Futilisation des formulaires et a 
la necessite de classer les informations donnees par 1' internaute. II est bien 
sflr possible d' employer un simple fichier texte avec un separateur entre 
les champs mais cette solution comporte plusieurs inconvenients. 

4.1 Le fichier face a la base de donnees 

Le fichier est fragile. Vous devez creer un double de votre fichier car tout 
fichier peut etre vide par un acces simultane. II faut done en verrouiller 
Faeces avec un verrou logiciel que le langage PHP fournit. 

Votre separateur doit etre un signe que vous n'utilisez jamais, pour qu'on 
ne le confonde pas avec un element de votre texte. 

La base de donnees est gratuite et proposee par tous les hebergeurs. Elle 
est robuste (en particulier MySQL) et rapide. De plus, elle propose des 
fonctions qui economisent des lignes de code. L' application de ce chapitre 
vous permettra de mieux comprendre tout cela. 

4.2 Conception de ('application du club 

Vous disposez d'une base de donnees MySQL vide. Une base de donnees 
sert a classer les informations en vue de les retrouver facilement et 
d'operer des rapprochements entre elles afin d'avoir des statistiques. 

Les donnees sont ce qu'il y a de plus important. Tout developpeur commence 
par la. Le site n'est ensuite la que pour presenter et traiter ces donnees. 

La premiere information concerne l'identite des membres et leurs coor- 
donnees : 

■ nom, 

■ prenom, 
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■ adresse, 

■ code postal, 

■ ville, 

■ pays, 

■ e-mail, 

■ telephone. 

Tout le monde n'aura pas envie de laisser une adresse postale ou un 
telephone, nous pouvons done penser que ces informations sont a 
considerer comme optionnelles. Par contre, il est interessant de disposer 
de la ville et du code postal car le but de ce club est la convivialite. II se 
peut en effet que des membres soient proches geographiquement et 
puissent ainsi organiser des rencontres locales. II faut done rendre 
obligatoire le code postal et le pays. 

L'adresse e-mail est obligatoire pour les contacts entre le webmestre et les 
membres du club, mais aussi pour les contacts entre les membres du club. 
Le prenom est interessant et le nom optionnel. 

Voyez egalement si l'adresse postale et le telephone sont indispensables. 
Les contacts peuvent se faire par courriel. S'ils le desirent, les membres 
s'echangeront ces deux informations. 

Le probleme est que le membre du club qui change d' adresse e-mail (ce 
qui peut arriver souvent) demandera eventuellement au webmestre d'ef- 
fectuer le changement. Cela peut prendre du temps si le club comprend de 
nombreux membres. II est plus interessant de permettre au membre un 
acces direct a ses donnees pour qu'il puisse, au besoin, les modifier. Mais 
comment etre sur qu'il s'agit de la personne en question et non d'une 
autre ? La solution ici passe par l'authentification. Nous l'etudierons au 
chapitre 5. II faut ajouter un nom d'usage et un mot de passe. Le nom 
d'usage apporte un anonymat et le mot de passe garantit l'identite de la 
personne. 

Creons maintenant ensemble la table dans la base de donnees. 

4.3 Creation d'une table 

Sachez qu'il est interessant dans une table de creer une cle unique qui 
identifie chaque nouvelle ligne. MySQL propose une fonction 
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AUTO_INCREMENT qui permet de creer automatiquement une cle qui 
s'incremente de 1 a chaque nouvelle ligne. Chaque nom d'usage dans le 
club sera unique puisqu'il identifiera un membre, done nom_usage peut 
servir de deuxieme cle, de cle secondaire. 




Chaque cle auto-incrementee est unique 

^2*y Chaque nouvelle ligne dispose d'une cle unique. Si vous 

effacez une ligne par la suite, la cle disparattra aussi. 
Par exemple, vous avez une ligne avec une cle 1 puis vous I'effacez. 
Vous n'avez done plus aucune ligne dans votre table mais la prochaine 
ligne commencera neanmoins a 2. Ainsi, I'integrite des donnees est 
garantie. 



Pour creer la table, nous devons definir le type de chaque donnee et sa 
longueur. 

Le nom d'usage est une chaine de caracteres dont nous pouvons limiter la 
longueur a 25 caracteres. Le mot de passe et le prenom sont de meme type, 
avec une longueur de 20 pour le mot de passe et de 25 pour le prenom. 



La longueur d'un champ MySQL 

Cest a vous de decider de la longueur du champ en 
question. Pour un nom d'usage, vous pouvez imaginer qu'ils ne 
depasseront pas 25 caracteres, ce qui est assez long. Cest vrai qu'il 
vaut mieux calculer plus large car si la donnee est trop longue, elle sera 
tronquee dans la table. D'autre part, les hebergeurs vous accordent 
beaucoup de place et il ne sert a hen d'economiser dans ce domaine, 
pour etre oblige ensuite d'elargir et de reconstituer les donnees 
tronquees. 



Le code postal est constitue en France d'une serie de cinq chiffres. Cette 
donnee peut done etre de type numerique. II vaut mieux lui donner un type 
"chaine de caracteres" car des Quebecois seront peut-etre interesses par 
votre club (leur code postal est compose de lettres et de chiffres). 
D'ailleurs, les neuf premiers departements francais sont precedes d'un 0. 
En regie generale, les codes postaux, les numeros de telephone... sont de 
type texte car ils ne sont pas des nombres mais des codes. Nous pourrions 
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utiliser les accents pour les noms de champ MySQL. Nous les eviterons 
cependant pour preserver l'homogeneite des noms. 



L'homogeneite des noms 

II est plus simple de gerer des noms homogenes. Ainsi, vous 
pouvez utiliser des _ ou des capitales pour nommer un champ 
mot de passe : mot_de_passe, MotdePasse, motdepasse ou mot- 
_passe. Choisissez un systeme de nommage et conservez-le. Des 
erreurs peuvent etre generees par les noms. Si le champ d'une cle 
auto-incrementee s'appelle toujours clef, vous n'aurez pas besoin de 
verifier le nom a chaque programme. 



Recapitulons la liste des donnees : 

■ clef numerique AUTO_INCREMENT 11 (caracteres) ; 

■ nom_usage texte 25 ; 

■ mot_passe texte 20 ; 

■ prenom texte 30 ; 

■ code_postal texte 12 ; 

■ vi 1 le texte 35 ; 

■ pays texte 35 ; 

■ emai 1 texte 50. 

Nous avons tous les elements pour creer notre table avec la commande 
CREATE de MySQL : 

CREATE TABLE membres ( 

clef int(ll) NOT NULL auto_i increment, 

nom_usage varchar(25) NOT NULL default '', 

mot_passe varchar(20) NOT NULL default ", 

prenom varchar(30) NOT NULL default ", 

code_postal varchar(12) NOT NULL default ", 

ville varchar(35) NOT NULL default ", 

pays varchar(35) NOT NULL default ", 

email varchar(50) NOT NULL default ", 

PRIMARY KEY (clef), 

INDEX (clef), 

UNIQUE KEY clef (clef), 

) 
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Analysons maintenant cette commande. Nous avons le nom de la colonne 
ou champ, le type de donnees, la longueur, l'attribut NULL ou NOT NULL, 
Fattribut DEFAULT. Nous verrons la cle primaire, l'index et l'attribut 
UNIQUE avant de revenir plus precisement a notre club. 

NULL est une absence de valeur, ce qui est different d'une valeur ou de 0. 
L' option NOT NULL oblige a indiquer une valeur. 

DEFAULT specifie une valeur pour un champ meme s'il a ete oublie au 
cours d'un INSERT dans le cas d'un champ comportant la specification NOT 
NULL. 

La cle primaire evite les doublons dans la table. L'inconvenient est que 
vous ne pouvez la changer une fois qu'elle est choisie, d'ou le choix d'une 
cle auto-incrementee. Ainsi a chaque insertion de donnees, vous n'aurez 
pas besoin de creer une cle, elle prendra automatiquement la valeur de la 
ligne precedente augmentee de 1 ou, par defaut, la valeur de 0 plus 1. 
Cette cle indexee et unique permet une recherche rapide a l'interieur de la 
table. L'attribut UNIQUE designe des cles secondaires. Ainsi les champs 
nom_usage et mot _passe ne peuvent comporter de doublons. Chaque 
membre possede bien sur une identite unique. Cependant, nous n' avons 
pas juge interessant de les caracteriser ainsi dans la table MySQL. II vaut 
mieux continuer dans l'artisanat et faire la verification "a la main", par 
quelques lignes de code. 




Verification des doublons sur nom usage et mot passe 

Dans notre exemple, le formulaire comprend deux pages, 
done les donnees sont inserees dans la table en deux fois. Entre 
les deux pages, les champs nom_usage et mot_passe sont vides. 
Imaginez que deux membres s'inscrivent en meme temps. Le deuxieme 
membre ne pourra pas inserer ses donnees car le champ sera vide 
dans les colonnes nom_usage et mot_passe pour les deux lignes, done 
considere par MySQL comme un doublon. 



L'indexation ameliore les temps de reponse d'une table. La cle primaire 
est systematiquement indexee pour permettre a MySQL de verifier si elle 
existe deja dans la table lors d'une insertion. Chaque champ avec la 
caracteristique UNIQUE comprend un index. 
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4.4 Modification d'une table 

En imaginant votre site, vous vous apercevez que vous aimeriez ajouter la 
date d'inscription de chaque membre. 

Avec MySQL, deux options existent pour la date. Soit vous entrez une 
date, soit vous utilisez un format qui la cree automatiquement. Cette 
derniere option evite de creer une donnee pour l'inserer et economise du 
code. II s'agit du type TIMESTAMP. L' inconvenient majeur de ce format de 
colonne est que si vous modifiez une donnee dans la ligne, comme par 
exemple l'e-mail, le champ modifiera aussi la date. C'est pourquoi nous 
conseillons l'autre option de date. 

Nous pouvons mettre les deux types de colonne. Ainsi, nous saurons si le 
membre du club a modifie ses donnees, done s'il est actif dans le club. 

Pour inserer ces deux champs, nous utiliserons la commande ALTER. Les 
champs s'appelleront date inscription et date_misajour : 

ALTER TABLE membres 

ADD date_i inscription DATE not null, 

ADD datejnisajour TIMESTAMP (8) not null 

Vous employez les commandes ALTER TABLE et ADD pour ajouter des 
colonnes a la table. Le type DATE a un format AAAA-MM-JJ par defaut et 
TIMESTAMP possede une longueur de 14 caracteres par defaut, sous la 
forme AAAAMMJJHHMMSS. Ici, la longueur de 8 induit un format de 
type AAAAMMJJ. 

Cette fois, vous commencez a voir votre site. Vous imaginez les membres 
qui s'inscrivent du monde entier a votre club. Vous rencontrez des 
membres d'autres pays et voyagez. Vous avez un cousin qui vit au Quebec 
et vous voyez deja parti vers ce pays pour rencontrer des Quebecois 
inscrits sur le site. Vous pourrez egalement vous amuser a faire des 
statistiques sur la nationalite des membres. Attention, certains membres 
vont orthographier differemment le nom de leur pays, vos statistiques 
seront done faussees. Grande-Bretagne pourrait etre ecrit Great Britain, 
Grande Bretagne, Royaume-Uni, United Kingdom... Certains Quebecois 
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ecriront Quebec et d'autres Canada. Si le nombre de membres est 
important, la base deviendra difficile a gerer. Les cles etrangeres sont une 
solution. 



4.5 Les cles etrangeres 

La meilleure facon de creer une homogeneite est de proposer des choix a 
travers des menus deroulants. Ainsi l'internaute ne tape rien. II choisit et 
n'entraine pas d'erreur. 

Nous allons creer dans la base une deuxieme table renfermant tous les 
pays du monde. Cette table est composee de deux colonnes. La premiere 
est un code de trois lettres, la seconde le nom du pays. 



Tables pour menus deroulants 

Pour homogeneiser les tables qui contiennent les elements 
des menus deroulants a I'interieur d'un formulaire, elles auront 
tes deux colonnes communes : code et nom. 



CREATE TABtE pays ( 

code char(3) NOT NUtL default ", 
nom varchar(lOO) NOT NULL default 

PRIMARY KEY (code), 

UNIQUE KEY code (code) 

) 



Vous trouverez les donnees pour creer une table sur le site www. mi croapp 
.com. Les trois lettres garantissent un code unique. Ainsi, dans la table 
membres, le champ pays renfermera une donnee texte d'une longueur fixe 
de 3. Vous ecrivez done dans le champ requite de PHPmy Admin, la 
commande : 



ALTER TABLE membres 

CHANGE pays pays CHAR (3) not null 



Precedemment, nous avions employe ADD. Nous changeons maintenant la 
nature de la colonne avec CHANGE. 
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Ainsi la donnee inseree dans la table membres et concernant le pays est 
une cle etrangere car elle a comme reference, la cle primaire d'une autre 
table. La cle etrangere est prise en compte avec la version 4. 1 de MySQL 
(Nous en sommes a la 3.23). 

Pour afficher le contenu de la table dans une page avec le code de la table 
membres remplace par le nom de la table pays, nous utiliserons une 
jointure. 

4.6 Les jointures de tables 

Pour afficher un resultat lisible, vous utilisez la requete SELECT en y 
incluant une jointure de table : 

SELECT * from membres, pays where membres. pays=pays. code 

Ici le signe * indique que tous les champs sont selectionnes. Pour prendre 
en compte uniquement certains champs, il faut les nommer. Si les tables 
ont deux champs qui portent le meme nom, il est necessaire de nommer 
aussi les tables. Nous conseillons de le faire systematiquement, dans le cas 
des jointures, pour ne pas rencontrer de mauvaises surprises. Ainsi pour 
selectionner tous les champs sauf la date de mise a jour, il faudrait ecrire 
la requete suivante : 

SELECT membres. nomjjsage, 
membres .mot_passe , 
membres.prenom, 
membres. code_postal , 
membres. vi lie, 
pays. nom , 
membres. email 

from membres, pays where membres. pays=pays. code 

Le point marque l'appartenance de nom_usage a la table membres par 
exemple. 



Double Poche PHP & MySQL .115 



4 MySQL en action 




▲ Figure 4.1 : Jointure 



4.7 Les types de donnees MySQL 

Recapitulons les types de contenu dans une table MySQL. Nous utilisons 
surtout les trois premiers types car dans l'application PHPmyAdmin, le 
champ de type text peut etre lu alors que le champ de type blob ne pourra 
afficher son contenu. Les champs de type char occupent une place 
identique et contigue tandis que les champs de type varchar sont disperses 
dans l'amas des donnees et demandent plus de ressources serveur. 



Tab. 4.1 : Les types texte et binaire 


Type 


Taille en bytes 


Description 


char(n) 


Longueur 


Un champ de texte d'une longueur fixe. 
Les chaines plus courtes sont 
completees (1 a 255). 


varchar(n) 


Longueur 


Un champ de texte d'une longueur 
maximum de n (1 a 255) 


text 


Longueur + 2 


Un champ de texte d'une longueur 
maximum de 64Kb 


blob 


Longueur + 2 


Un champ binaire d'une longueur 
maximum de 64Kb 



Pour le commerce electronique, les prix seront stockes dans des colonnes 
de type DECIMAL. Les differences de taille permettent d'economiser de la 
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place, ce qui est interessant uniquement si vous avez de grandes quantites 
de donnees car alors, un octet de difference sur plusieurs centaines de 
milliers de champs peut creer une legere difference de temps de reponse 
et un gain de place sur le disque dur du serveur. 



Tab. 4.2: Les types numeriques 




Taille 


Description 


TINYINT(n) 


1 


Entier non signe (unsi gned) de 0 a 255, signe 
de -128 a 127 


SMALLINT(n) 


2 


Entier non signe de 0 a 65535, signe de -32768 
a 32767 


MEDIUMINT(n) 


3 


Entier non signe de 0 a 16777215, signe de 
-8388608 a 8388607 


INT(n) 


4 


Entier non signe de 0 a 4294967295, signe de 
-2147483648 a 2147483647 


BIGINT(n) 


8 


Entier non signe de 0 a 4294967295, signe de 
-2147483648 a 2147483647 


FL0AT(n, 
dec) 


4 


Nombre a virgule flottante a simple precision 
correspondant au type de meme nom dans le 
langage PHP 


D0UBLE(n, 
dec) 


8 


Nombre a virgule flottante a double precision 
correspondant au type de meme nom dans le 
langage PHP 


DECIMAL(n, 
dec) 


Longueur 


Nombres precis stockes sous forme de 
caracteres 



Mefions-nous de TIMESTAMP. II vaut mieux Futiliser seulement quand la 
date de mise a jour est la plus interessante. 



Tab. 4.3 : Les types date et heure 






Description 


TIMESTAMP(n) 


4 


Mis a jour a chaque modification de la ligne. Si n=14, 
le nombre produit sera de type AAAAMMJJHHMMSS, 
pour 8, AAAAMMJJ, pour 10, AAAAMMJJHH... 


DATE 


3 


Formate AAAA-MM-JJ meme si la date est entree 
sous la forme AAMMJJ. . . 
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Tab. 4.3: Les types date et heure 






Description 


TIME 


3 


Formate HH:MM:SS meme si I'entree est sous la 
forme HHMMSS ou HHMM... 



DATETIME 8 



Formate AAAA-MM-JJ HH:MM:SS quel que soit son 
format d'entree 



4.8 La sauvegarde de la base 

Transportons maintenant la base de donnees de votre machine sur votre 
nouveau site. 
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▲ Figure 4.2 : Sauvegarde de la base de donnees 



Avec PHPmy Admin, il est simple et pratique de sauvegarder la base. II 
vous suffit d'aller dans la rubrique Afficher le schema de la base. Vous 
avez alors le choix de son contenu, soit uniquement la structure, la 
structure et les donnees, ou encore les donnees seulement. Ensuite, vous 
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avez la possibilite de d'enregistrer la base sur votre disque dur en fichier 
texte ou compresse. Faites une sauvegarde reguliere. Sinon, en cas de 
problemes, vous ne recupererez peut-etre pas les internautes inscrits 
depuis la derniere sauvegarde. 

4.9 Les formulaires 

Une des principales utilisations de PHP et raisons de son succes est la 
facilite qu'il procure au webmestre pour traiter les donnees envoyees par un 
formulaire. Le formulaire, comme le courriel, est un des vecteurs princi- 
paux de la communication entre les internautes et le webmestre du site. 

PHP gere les donnees du formulaire de maniere transparente. II cree 
automatiquement les variables a partir des noms utilises pour qualifier les 
champs du formulaire. II entrepose ces variables dans un tableau de portee 
globale. C'est-a-dire que ces variables peuvent etre appelees directement 
depuis n'importe quelle partie de l'application. 

L'inscription au club 

Dans une page d'accueil, vous ferez la promotion de votre club. Elle 
contiendra un lien qui permettra de rejoindre la page d'inscription. Cette 
derniere sera un formulaire. 

Les visiteurs d'un site sont mefiants, a juste titre. lis peuvent hesiter a 
donner leurs coordonnees a quelqu'un qu'ils ne connaissent pas. 
Rassurez-les sur la confidentialite de ces donnees et la possibilite pour eux 
de supprimer leur profil, le cas echeant. 

Le fichier de connexion a la base 

Nous avons vu precedemment que pour acceder a la base de donnees, il 
fallait un nom d'utilisateur et un mot de passe. Si vous avez besoin de cet 
acces dans votre page, saisissez les lignes suivantes : 



<? 




$dbname = ' nom base ' ; 




$hostname = ' local host ' ; 




$username = 'nom uti 1 i sateur' ; 




$password = 'mot de passe'; 




if (!$id link = mysql connect ($hostname, $username, '. 


(password)) { 


echo 'Connexion impossible a mysql'; 
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1 

1 


exi t ; 






i f 


(Imysql select db($dbname, ! 


id link 


)) { 




echo 'Selection de base de 


donnees 


impossible' ; 




exi t ; 






} 

?> 









Ces quelques lignes composent votre fichier de connexion. Sur votre site, 
vous allez creer un repertoire nomme commun. Dans ce repertoire, vous 
placerez tous vos programmes (fichiers inclus et fonctions). Ce fichier qui 
est un fichier inclus dans toutes les pages demandant une connexion a la 
base de donnees, s'appellera connexion.inc.php. inc est l'abreviation de 
i ncl ude. Ce type d'architecture est pratique car elle facilite la migration 
d'une application d'un serveur vers un autre. Ainsi, il vous sera facile de 
transporter votre application, de votre serveur de test sur votre machine 
personnelle a celui de l'hebergeur, sans faire de changement majeur. II 
vous suffira de modifier ce fichier. 



Les fichiers inclus 

lis sont appeles depuis un autre fichier PHP avec la ligne 
include 'commun/connexion.inc.php 1 . II est necessaire dans ce 
type de fichier d'utiliser les balises PHP, bien qu'il soit inclus dans un 
fichier qui en comporte deja. 



La fonction mysql_COnnect () renvoie l'identifiant de connexion MySQL 
en cas de succes et FALSE si la connexion n'a pu se faire. Par les deux 
conditions (if...), Faction est generee et si la fonction renvoie FALSE, le 
bloc conditionnel est execute. Le message affiche en cas d'echec de la 
connexion ou de la selection de la base de donnees est minimal, il vous 
appartient de le personnaliser et de l'agrementer. 



Exit 

N'oubliez pas la commande exit a la fin de votre bloc 
conditionnel, sinon le reste de I'application sera execute et vous 
afficherez deux pages superposees. 
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La premiere page 

Creons maintenant la page contenant un formulaire d'inscription au club. 
Nous ne ferons aucune innovation, nous reprendrons simplement le nom 
des colonnes de la table pour les champs du formulaire, sauf celles qui 
generent des donnees automatiques comme clef avec la fonction AU- 
TOJNCREMENT et datejni sajour avec le format TIMESTAMP, ainsi que 
celles qu'il nous appartient de renseigner comme date_i nscri pti on. 
Voici les colonnes : 

nom_usage, mot_passe, prenom, code_postal , vi 1 1 e, pays et emai 1 . 

La question est de savoir maintenant s'il faut deploy er ce questionnaire 
sur plusieurs ou sur une seule page. Ne perdez pas de vue qu'il vaut mieux 
eviter d'effrayer l'internaute en lui presentant trop de champs a renseigner. 

Faut-il generer un mot de passe ou laisser l'internaute le choisir ? Un mot 
de passe genere aleatoirement sera difficilement memorise par l'internaute 
mais mieux securise. Le but est de mettre a l'aise le visiteur et de 
n'opposer aucun obstacle a son desir de participer. Le choix sera done 
arrete pour un mot de passe choisi par l'internaute. Cependant, il devra 
comporter au moins huit caracteres. 

La deuxieme page du formulaire sera consacree a la creation du nom 
d'usage et du mot de passe. 




Les pages de votre application 

L'objet de ce livre n'est pas de creer de belles pages au 
design seduisant mais de decrire et expliquer des applications en 
PHP, pour que vous soyez capable de les creer. Nous vous conseillons 
d'ameliorer vos pages avec un beau graphisme, une ergonomie de 
navigation claire et un ton personnel. 



Voici la premiere etape d'ecriture du code de la premiere page 

<html> 
<head> 

<ti tle>Inscription</title> 
</head> 
<body> 
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Pour vous inscrire dans le club, nous avons besoin de quelques 
renseignements. Preparez un nom d 1 usage pour le club et un mot de 
passe de plus de 8 caracteres dont vous vous souviendrez facilement. 
<form action="inscription_p2" method="post" name="page_l> 
<table eel 1 spacing="2" eel 1 paddi ng="2" border="0"> 
<tr> 

<td>Votre prenom :</td> 

<tdxinput type="text" name="prenom"x/td> 
</tr> 
<tr> 

<td>Votre adresse email </td> 

<tdxinput type="text" name="emai 1 "></td> 
</tr> 
<tr> 

<td>Votre code postal </td> 

<tdxinput type="text" name="code_postal "x/td> 

</tr> 
<tr> 

<td>La ville ou vous vivez</td> 

<tdxinput type="text" name="vi 1 1 e"x/td> 
</tr> 
<tr> 

<td>Votre pays</td> 

<tdxinput type="text" name="pays"x/td> 
</tr> 
<tr> 

<tdx/td> 

<tdxinput type="submi t" name="Je m 1 inscri s"x/td> 
</tr> 
</tabl e> 
</form> 
</body> 
</html> 



Nom des champs et nom des colonnes 

Vous constatez que I'attribut name des champs du formulaire 
reprend la denomination des colonnes de la table, voici pourquoi 
nous creons d'abord les tables. 



II manque le menu deroulant pour le choix du pays. Pour le constraire, 
nous nous connecterons a la table pays et afficherons son contenu. Le 
menu deroulant HTML pour pays serait par exemple : 
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<select name="pays"> 
<option value="ES" selected>Espagne</option> 
<option val ue="FR">France</option>... 

</sel ect> 



name est le nom de la variable genere par le moteur PHP tandis que val ue 
est sa valeur. Si le code etait absent, le nom affiche (Espagne) serait 
envoye. L'attribut sel ected selectionne le nom qui sera affiche par defaut 
a l'ouverture de la page. 




Selection par defaut 

Avant d'envoyer le formulaire, nous ferons une verification 
avec un langage qui rend cette demiere plus simple : Javascript. 
Par convenance, nous aurons dans tous les menus deroulants une 
valeur vide par defaut. Cette astuce permet de savoir si I'internaute a 
choisi volontairement une valeur. Si, par exemple, vous mettez France 
par defaut, un internaute negligent de Madagascar ou du Quebec 
laissera la valeur par defaut. 



Nous allons ajouter une ligne en haut du fichier inscription jpl.php, 
encadree par les balises PHP : 



i ncl ude "commun/connexion. i nc.php" ; 



Notre menu en PHP sera : 



$sql="select * FROM pays ORDER BY nom"; 
$resul tat=@mysql_query ($sql ,$id_l ink) ; 
echo '<select name="pays">' ; 
echo '<option value="" selectedx/option>' ; 
///////////////la premiere ligne vide/// 

whi 1 e ($rang=mysql_fetch_array ($resul tat) ) { 
// mysql_fetch_array () cree un tableau avec les lignes du resultat 
$code=$rang[ 1 code '] ; 
$nom=$rang[ 1 nom 1 ] ; 

echo "<option val ue=\"$code\">$nom</option>" ; 
} 

echo '</select>'; 
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Dans cette deuxieme version, nous utilisons des commandes SQL pour 
recolter 1' information. Nous employons la fonction mysql_query () qui 
prend comme parametres la commande SQL et l'identifiant de connexion. 
Son resultat est transforme en tableau par la fonction mysql_fetch_ar- 
ray () . Une boucle whi 1 e decline ensuite le tableau sous forme de lignes. 

II suffit alors d'inclure les valeurs de champ (en l'occurrence code et nom) 
dans un HTML reconstitue avec la commande echo. Le nom du champ est 
aussi la cle ou l'indice du tableau. 

Nous creons une valeur vide pour la balise option comme selection par 
defaut, arm de verifier si le champ est renseigne par le visiteur. N'oubliez 
pas, non plus, d'attribuer aux guillemets des signes d'echappement (barre 
oblique inversee) a l'interieur des guillemets. 



Inscription - Netscape j _ | l"H~ 


□ 


Rchier Edition Affchage Aller Communicator ? 


Precedent Recharger Accueil Rechercher Guide Imprimer Securite Am§1 


D 


^ Signets Adresse:|http://1270.0.1/Clubbonsvivants/BonsVivants/inscription_pl.php ▼ | Infos connexes 
' H Internet §1 Nouveautes [§l Sites interessa [§] Membres 0 Connexions §1 Marche 


Pour vous inscrire dans le club, nous avons besoin de quelques renseignements. Preparez 
un surnorn pour le club et un mot de passe de plus de 8 caracteres dont vous vous 
souviendrez facilernent. 




Votre prenom : |jean 




Votre email |jean@carfantan.com 




1 

Votre code postal 




La ville oii vous vivez | 




Votre pays 




Je m'inscris | 




d° Document: charge . ± ,^'3 ^ 



▲ Figure 4.3 : Formulaire, inscription premiere page 



Sans ce code nourri dans la table pays, vous seriez oblige d'ecrire, ligne 
apres ligne, la liste des deux cents et quelques pays dans la page. 
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Priorites dans la liste 

Les visiteurs de votre site viendront sans doute plutot des pays 
francophones. Avec la commande select, vous pouvez ordonner 
la liste pour que les visiteurs ne soient pas obliges de faire defiler deux 
cents noms de pays avant de trouver le leur. Ainsi, vous ajoutez une 
colonne nommee ordre. Dans cette colonne, indiquez 1 pour les pays 
francophones. II vous suffit ensuite de moduler le tri avec ORDER BY afin 
d'avoir d'abord, par ordre alphabetique croissant, les pays dont le champ 
ordre est 1 puis les autres, toujours par ordre alphabetique : 

<? 

echo '<select name="pays">' ; 

echo '<option value=""x/option>' ; 

$sql="select * from pays ORDER BY ordre DESC, nom ASC"; 
//premiere requete 

$resul tat=@mysql_query ($sql ,$id_l ink) ; 

whi 1 e ($rang=mysql_fetch_array ($resul tat) ) { 
$code=$rang['code'] ; 
$nom=$rang[ ' nom 1 ] ; 

echo "<option val ue=\"$code\">$nom</option>" ; 



Nous pourrions ajouter WHERE. 

WHERE permet de selectionner les lignes de la table en fonction de la valeur 
d'un ou de plusieurs champs. Pour plusieurs champs, nous aurions pu 
utiliser les mots-cles AND ou OR : 

SELECT * from pays WHERE code= ' FRA' AND ordre=l 
L'exemple est absurde mais permet de bien comprendre la syntaxe. 

La deuxieme page 

Construisons maintenant le programme pour traiter le formulaire. 



Les balises PHP 

Les balises qui signalent PHP sont <? ?>, <?php ?> ou 
comme pour I'ASP, <% %>. Cela depend de vos fichiers de 
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configuration. En regie generale, si vous utilisez <?php 
vous etes sur que ca fonctionne. 



?>, 



Voici les premieres lignes du programme : 
<? 

i ncl ude "commun/connexion. i nc.php" ; 
$prenom=$_POST[ ' prenom'] ; 
$code_postal =$_P0ST[ 1 code_postal '] ; 
$ville =$_POST['ville'] ; 
$email=$_POST[' email '] ; 

$sql = "INSERT INTO membres (prenom, code_postal , ville, pays, email) 
VALUES ('Sprenom 1 , ' $code_postal ' , '$ville', '$pays', '$email')"; 
@mysql_query ($sql ,$id_l i nk) ; 

?> 



Les variables dans la requete SQL 

/• 6 " 4 <7 

Dans I'exemple ci-dessus, les variables sont encadrees par 
des guillemets simples. Nous avons vu precedemment que des 
variables a I'interieur de guillemets simples n'etaient pas remplacees 
par leur valeur et que PHP les prenait litteralement. Ici ce n'est pas le 
cas car les guillemets simples sont a I'interieur de guillemets doubles. 



Inserez ensuite le code HTML de la deuxieme page 



<html> 
<head> 

<title>Inscription</title> 
</head> 
<body> 

Veuillez maintenant choisir le nom d'usage que vous porterez dans le 
club et le mot de passe pour y acceder. Vous pourrez ainsi 
rencontrer d'autres membres et modifier votre profil, 
voire le supprimer eventuel lement. 

<form action="traitement_id.php" method="post" name="page_2"> 

<table eel 1 spacing="2" eel 1 paddi ng="2" border="0"> 

<tr> 

<td>Votre nom d'usage</td> 
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<tdxinput type="text" name="nom_usage"x/td> 
</tr> 
<tr> 

<td>Votre mot de passe</td> 

<tdxinput type="password" name="mot_passe"x/td> 
</tr> 
<tr> 

<td>Retapez votre mot de passe</td> 

<tdxinput type="password" name="mot_passebi s"x/td> 

</tr> 

</tabl e> 

</form> 

</body> 

</html> 

Le champ input de type password affiche des etoiles a la place des mots. 
Pour verifier l'adequation des deux mots de passe saisis, nous utiliserons 
le langage Javascript que nous aborderons un peu plus loin dans ce 
chapitre. 

La page est utilisable telle quelle, pourtant nous pouvons encore l'ame- 
liorer en ajoutant deux champs : un champ question et un champ reponse. 
Ainsi, en cas d'oubli, le membre repondra a une question secrete qui lui 
permettra de valider son identite avant de recevoir son mot de passe. Nous 
suggerons une question secrete par defaut, avec l'attribut val ue du champ 
question. Nous ajoutons l'attribut size pour que la longueur du champ 
soit adaptee a la phrase. 

<tr> 

<td>Votre question secrete en cas d 1 oubl i</td> 

<tdxinput type="text" name="question" value="Quel est le nom de 
jeune fille de votre mere ?" size="50"x/td> 
</tr> 
<tr> 

<td>Votre reponse</td> 

<tdxinput type="text" name="reponse"x/td> 
</tr> 

II faudra aj outer ces deux colonnes a votre table membres avec la 
commande ALTER comme nous l'avons fait precedemment pour ajouter 
a la table les champs date inscription et date_misajour. 
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^f j Inscription - Netscape 



Rchier Edition Affichage Alter Communicator 



a A 

Recharger Accueil Rechercher 



Guide 



Imprimer 



Securite 



Precedent 

^"Signets Jb Adresse:|http://1270.0.1/Clubbonsvivants/BonsVivants/inscription_p2.php Infos connexes 

^ Internet §1 Nouveautes ^1 Sites interessa [§] Membres §1 Connexions ^ Marche 



Veuillez maintenant choisir le surnom que vous porterez dans le club et le mot de passe 
pour y acceder. Vous pouirez ainsi rencontrer d'autres membres et modifier votre profil, 
voire le supprimer eventuellement. 



Votre surnom 

Votre mot de passe 

Retapez votre mot de 
passe 

Votre question secrete 
en cas d'oubli 

Votre reponse 



Korrigan| 



Quel est le nom de jeune fille de votre mere ? 



^ Document: charge =\ fjjh 



k. Figure 4.4 : Formulaire, inscription deuxieme page 

Nous avons presque fini mais imaginez qu'un internaute paresseux perde 
son mot de passe et pense qu'il est plus simple de se reinscrire. II serait 
alors inscrit deux fois. 

Pour eviter cela, il faut effectuer une verification sur le champ email de 
votre table membres : 

$sql = "select clef from membres where emai 1 = 1 $emai 1 '" ; 
$resul tat=@mysql_query ($sql ,$id_l ink) ; 
$nombre=mysql_num_rows ($resultat) ; 
if ($nombre >0) { 
$auth=l; 

include "i nscri ption_pl.php" ; 
exit; 

} 

Avant include "inscription_pl.php";, il suffit d'ajouter $auth=l; et 
d'inserer une condition dans le formulaire inscription _pl.php pour 
afficher une information : 
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if ($auth==l){ 

echo "<pxfont col or=\"#FF0000\"> Vous etes deja membre et vous avez 
peut-etre <a href=\"oubl i .php\">oubl ie votre mot de 
passe</a>.</fontx/p>" ; 

} 



La troisieme page 

Pour la troisieme page, nous allons inserer le nom d'usage, le mot de passe 
et la date d' inscription, remercier le nouveau membre du club et lui 
envoyer un courriel de confirmation. Enfin nous detruirons les entrees non 
valides dans la table : 

<? 

i ncl ude "commun/connexion. i nc.php" ; 

/V//////////////////DATE SOUS LA FORME AAAAMMJJ/ ///////////////// /*/ 
$moment=date ("Ymd", mktime (0,0,0,date("m") ,date("d") ,date("Y"))) ; 
$nom_usage =$_POST['nom_usage'] ; 
$mot_passe =$_POST['mot_passe'] ; 
$question =$_POST['question'] ; 
$reponse= strtol ower($_P0ST[ 1 reponse '] ) ; 

$sql = "INSERT INTO membres (nom_usage, mot_passe, date_inscription, 
question, reponse) VALUES ( 1 $nom_usage ' , '$mot_passe' , '$moment', 
'$question', 1 $reponse' ) " ; 

@mysql_query ($sql ,$id_l i nk) ; 

?> 

<html> 
<head> 

<title>Inscription</title> 
</head> 
<body> 

Merci de votre inscription et bienvenue dans le Club des Bons 

Vivants. Nous venons de vous envoyer un courriel de confirmation 

avec votre nom d'usage et votre mot de passe. 

<CENTERxi>Le webmestre</ix/CENTER> 

</body> 

</html> 



127.0.0.1 - [Application JavaScript] 




•* Figure 4.5 : 

Formulaire, 
remerciement 
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Nous avons presque fini mais imaginez que deux internautes choisissent 
le meme nom d'usage. Cela invaliderait les procedures de votre club. 

Pour eviter cela, il faut effectuer une verification dans votre table 
membres : 

$sql = "SELECT clef FROM membres WHERE nom_usage= ' $nom_usage'" ; 
$resul tat=@mysql_query ($sql ,$id_l ink) ; 
$nombre=mysql_num_rows ($resultat) ; 
if ($nombre >0) { 
$auth=2; 

include "i nscri ption_p2. php" ; 
exit; 

} 

Le reste du code ne sera pas execute grace a la commande exit. Ensuite, 
il suffit d'inserer une condition dans le formulaire inscription _p2.php pour 
afficher une information : 

if ($auth==2){ 

echo "<pxfont col or=\"#FF0000\">Votre nom d'usage existe deja dans 

la base de donnees. Soit vous etes deja membre et vous avez 

<a href=\"oubl i .php\">oubl ie votre mot de passe</a>. Soit il s'agit 

d'une simple coincidence, dans lequel cas, entrez un nouveau nom 

d ' usage. . .</fontx/p>" ; 

} 

Enfin, dans la troisieme page, nous ajoutons : 

$hier=date ("Ymd", mktime (0,0,0,date("m") ,date("d")-l,date("Y"))) ; 
$sql = "DELETE FROM membres WHERE nom_usage='' AND date_misajour<$hier"; 
@mysql_query ($sql , $ i d_l ink); 

} 

Nous profitons de ce programme pour ajouter ces quelques lignes de code, 
enlevant ainsi les enregistrements incomplets dont la creation date de plus 
d'un jour et nettoyer la table. 

Fabriquons maintenant puis envoyons le courriel de bienvenue. 
Lafonction mail() 

Le courriel est envoye avec la fonction mai 1 () . II peut etre expedie sous 
plusieurs formats, le format texte ou le format HTML. Le format HTML, 
mieux presente, n'est pas accepte par tous les logiciels de courrier. 
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mailQ 

Cette fonction permet d'utiliser le serveur SMTP, c'est-a-dire le serveur 
d'envoi de courriel 

Syntaxe mail (string adresse, string sujet, string message) 

Options [, string en-tetes] 

Le resultat retourne est TRUE ou FALSE. 

Nous allons d'abord placer le contenu dans une variable : 

$contenu="Bienvenue $prenom,\nVous faites desormais partie du club 
des Bons Vivants. Votre nom d'usage dans le Club est $nom_usage et 
votre mot de passe $mot_passe. Conservez-le afin d'avoir acces au 
Club.\nCordialement\nle Webmestre, Frangois Rabel ai s .\n" ; 



Format texte 

$entete="From: \"le club des Bon Vivants\" 
<contact@bons-vi vants .org>\n" ; 
mail ("$emai 1 " , " BI ENVENUE AU CLUB" , "$contenu" ,$entete) ; 



Format HTML 

$contenu="Bienvenue $prenom,\nVous faites desormais partie du Club 
des Bons Vivants. Votre nom d'usage dans le Club est 
<B>$nom_usage</B> 

et votre mot de passe <B> $mot_passe</B>. Conservez-le 

afin d'avoir acces au Club.\nCordialement\nle Webmestre, Frangois 

Rabel ais.\n"; 

//nous creons le message 

$contenu=nl 2br($contenu) ; 

//nous creons les paragraphes en HTML avec la fonction nl2br() 
//nous composons le courriel 
$message="<HTML>\n" ; 
$message . = "<HEAD>\n " ; 
$message.="<META NAME=\"GENERATOR\" 
Content=\"Mi crosof t DHTML Editing Control \">\n" ; 
$message. = "<TITLEx/TITLE>\n" ; 
// vous pouvez y mettre un titre si vous voulez 
$message.="</HEAD>\n"; 

$message . = "<B0DYxF0NT face=Ari alxFONT col or=#000000>\n" ; 
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$message. = "<Pxdiv al ign=\"center\"xSTRONGxFONT size=4> 

Bienvenue $prenom dans le club des Bons Vi vants</FONTx/STRONG> 

</divx/px/FONT> </PxF0NT col or=#000000> 

<font face=\"Arial , Helvetica, sans-serif\" si ze=\"2\">\n" ; 

$message.=$contenu; 

$message. = "</FONTx/P>\n"; 

$message.="</BODY>\n"; 

$message.="</HTML>\n" ; 



Composons maintenant les en-tetes du message : 



$entetes = "From: \"le club des Bon Vivants\" 
<contact@bons-vi vants .org>\n" ; 

$entetes .= "X-Sender: <contact@bons-vi vants. com>\n" ; 

$entetes .= "X-Mailer: PHP\n"; // mailer 

$entetes .= "X-Priority: l\n"; 

$entetes .= "Return-Path: <contact@bons-vi vants. org>\n" ; 

$entetes .= "Content-Type: text/html; charset=i so-8859-l\n" ; 

et envoyons le tout : 

mail ("$emai 1 " , "BIENVENUE AU CLUB" , "$message" ,$entetes) ; 

Pour ajouter des <BR> a chaque \n, nous utilisons la fonction nl 2br ()que 
vous connaissez. 



Oubli - Netscape 



Fichier Edition Affichage Aller Communicator 




4. W m a 

Precedent Recharger Accueil 


Rechercher W^M 


I'Signets „i Adresse: pjlBBBUBllIiliTi! ^| 


Infos connexes 


* § Internet § Nouveautes g] Sites interessa 


@ Membres @ Cor 


Votre reponse est incorrecte! 




Tenter une nouvelle fois ? 








rf* Document: charge i| -Jst 







A. Figure 4.6: Courriel au format HTML 
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La fonction mail() 

Avant de choisir un hebergeur, assurez-vous que la fonction 
mail () est disponible sur le serveur. 



4.1 0 Les f onctions du langage PHP 
pour MySQL 

Le langage PHP tire profit de la simplicite de son interface avec les bases 
de donnees, en particulier MySQL. Voici les fonctions que vous utiliserez 
le plus souvent. 



Tab. 4.4 : Les principales fonctions d'acces a une base MySQL 


Fonction 


Description 


mysql connect() 


Ouvre une connexion. 


mysql create db() 


Cree une base. 


mysql query() 


Execute une requete et retourne un identificateur de resultats 

OU FALSE. 


mysql fetch array() 


Distribue un resultat dans un tableau a index numerique ou un 
tableau de hachage. 



mysql_num_rows() Retourne le nombre de rangs a partir d'un resultat. 



4.1 1 La verification des formulaires 

Dans un site interactif, vous devez composer avec les erreurs de frappe, 
les problemes de comprehension et le "sabotage". Ainsi, la verification des 
champs obligatoires est indispensable. II existe deux facons de verifier un 
formulaire : 

■ la verification instantanee avec le langage Javascript ; 

■ la verification pendant le traitement de V information avec PHP. 
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La verification avec Javascript 

Javascript est un langage cote client, c'est-a-dire qu'il est interprets 
directement par le navigateur web. L'interet de cette verification est 
qu'elle oblige le visiteur a corriger le champ errone, done le serveur 
envoie uniquement des informations valides dans le programme de 
traitement. C'est l'approche pour la correction d'erreurs eventuelles. Nous 
n'emploierons PHP que pour des champs qui posent probleme a Javas- 
cript, comme le menu a choix multiple ou tout champ qui comprend 
plusieurs elements a selectionner. 

Nous ne verrons dans cette partie que la syntaxe Javascript utile dans le 
cas d'un formulaire. Pour approfondir, nous vous donnerons les URL de 
sites interessants en annexe. 

Quelques notions indispensables 

La syntaxe de ce langage est legerement differente de celle de PHP, meme 
si vous disposez aussi des variables, des tests, des boucles, des fonctions 
(celles qui preexistent et celles que vous creez vous-meme) et des objets 
(theme que nous n'evoquerons pas dans ce livre). 

Les fonctions 

Les fonctions Javascri pt sont placees dans l'en-tete HTML tandis 
qu'elles sont appelees a partir de la balise FORM ou d'un champ du 
formulaire (y compris le bouton SUBMIT). Ce langage verifie directe- 
ment, dans la memoire vive du navigateur, les donnees entrees par 
l'utilisateur. Une fonction Javascript est appelee par un evenement. Dans 
un formulaire, cet evenement est un changement intervenu dans un champ 
ou un clic sur le bouton SUBMIT. Comme dans le langage PHP, une 
fonction peut en appeler une autre. 

Variables et objets 

Une variable doit etre declaree. Son nom n'est pas precede d'un $. 

Les objets comme les elements d'une page web sont definis dans une 
hierarchie arborescente nommee le DOM (Document Object Model). 
FORM est un de ces objets. La notation pour definir le premier champ, 
nom_usage, dans la deuxieme page est window. document. forms[0] 
.nom_usage. Si vous n'avez qu'une fenetre, c'est-a-dire que vous n'avez 
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pas ouvert de nouvelle fenetre avec une fonction Javascript, vous pouvez 
elider le mot window et ecrire document. forms [0] .nom_usage. Javas- 
cript cree automatiquement un tableau d'objets, ainsi le meme objet 
nom_usage peut etre defini a l'aide des tableaux et s'ecrire indifferem- 
ment : 

■ document . forms [0] . nom_usage ; 

■ document. page_2. el ements[0] ; 

■ document, forms [0] .elements [0]. 



Tableaux 

Le premier element d'un tableau a un Indice 0 comme en 
PHP et le nom des tableaux est au pluriel, meme si vous n'avez 
qu'un formulaire ou qu'un element de formulaire. 



Un objet Stri ng dispose de la propriete 1 ength que nous utiliserons pour 
verifier que le champ a ete rempli correctement. L'objet window contient 
la methode alert() qui permet d'afficher une fenetre d'avertissement 
avec un bouton OK. Etudions plus precisement maintenant les objets du 
formulaire et leurs proprietes. 

Les objets de formulaire 

Les champs texte ont comme propriete name, def aul tVal ue et value. 

Ainsi l'expression document . forms [0] . nom_usage. value. length ren- 
ferme la longueur de la valeur que l'internaute entre dans le champ 
nom_usage. Si cette valeur est egale a 0, on peut penser que l'internaute 
n'a rien entre dans ce champ nom_usage. 

Si vous voulez lire un chiffre comme valeur numerique dans un champ 
texte, vous devrez utiliser la fonction parselnt(). Si nous posions la 
question du nombre de membres vivant au foyer, pour verifier le nombre 
il faudrait ecrire: nb_personnes=parseInt (document . forms [0] . nb_ 
foyer . val ue) . La valeur devra etre d'au moins une personne et pour 
utiliser "plus grand que", la methode parselnt() est necessaire afin de 
transformer la chame de caracteres en un entier. 
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Tab. 4.5: Quelques methodes Javascript liees aux formulaires 


Methodes . 


Description 


focus () 


Met le curseur dans le champ. 


hi nvM 


UcbdUUVc Ic UllalllfJ Gil bUILalll Ic LUIbcUI. 


select() 


Selectionne le contenu du champ. 


alert () 


Cree une fenetre de validation qui presente un bouton OK. 


prompt () 


Cree une fenetre de saisie qui demande une reponse a une 
question. 


conf i rm() 


Cree une fenetre de confirmation qui presente un bouton OK et 
un bouton annuler. 


parselnt() 


Recupere les chiffres sous forme numerique dans un champ 
text. 



Les cases ou les boutons a cocker 

Une case a cocher est un element individuel a cocher. II est individuel 
dans la mesure ou un nom le differencie des autres cases. 

Un bouton radio est un bouton solidaire de son groupe puisque chaque 
bouton radio d'un groupe de boutons possede le meme nom. Le choix est 
un choix exclusif. Si vous cochez un bouton radio, les autres se mettront 
dans l'etat vide. 

Menus deroulants a choix unique 

Le choix de l'internaute dans un menu deroulant est stocke dans la 
propriete sel ected Index. Ensuite, le resultat nous permet de connaitre la 
valeur choisie : 

i ndex_pays=document . forms [0] . pays .sel ected I ndex; 

1 epays= document .forms [0] .pays .options [index_pays] . val ue; 

Ici la valeur est cherchee dans le tableau d'options avec l'index designe 
par la propriete sel ected I ndex. 
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Quelques references complementaires 

Pour completer cette etude du langage Javascript afin de verifier vos 
formulaires, il vous reste a connaitre les parametres des objets presents 
dans le tableau el ements [] . 



Tab. 4.6: Les parametres Javascript pour les champs de formulaire 


Proprietes 






name 


Tous 


String 


value 


Tous 


String 


checked 


Case a cocher, bouton radio 


Booleen 


sel ectedlndex 


Menu deroulant 


Int 


1 ength 


Bouton radio, menu deroulant (nombre 
d'elements) 


Int 



Voici encore des evenements qui peuvent declencher l'appel a une 
fonction. 



Tab. 4.7 : Evenements Javascript 


Evenements 


Description 


onSubmit 


L'internaute clique sur le bouton submit. 


onCl i ck 


L'internaute clique sur un lien, un bouton radio, une case a 
cocher... 


onSel ect 


L'internaute selectionne une partie ou tout le texte d'un champ 
texte. 


onFocus 


L'internaute clique dans un champ texte. 


onChange 


L'internaute change le contenu d'un champ et en sort. 


onBl ur 


L'internaute sort d'un champ texte. 



Voyons maintenant les scripts Javascript a aj outer a nos pages de 
formulaires. 
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Les scripts Javascript 

Ces scripts consistent en une ou plusieurs fonctions. Elles sont lancees par 
un evenement onSubmit qui intervient quand l'internaute clique sur le 
bouton submit. 

Premiere page 

Les fonctions seront appelees a partir de la balise FORM : 

<form action="inscription_p2" method="post" onSubmi t="return 
envoi () "> 

L' evenement onSubmit ne pourra etre operant que s'il recoit la valeur 
TRUE de la fonction envoi (). 

Nous allons d'abord creer une fonction envoi Opour empecher l'inter- 
naute de cliquer plusieurs fois sur le bouton submit. 

var unique=0; 

//ici la variable est declaree avec ou sans le mot var 

function envoi () { 

if (unique == 0) { 

unique++; 

return true; 

} 

el se { 

alert("Envoi en cours...!"); 
return false; 

} 
} 

Nous declarons d'abord une variable globale unique (situee dans la page, 
en dehors du bloc d' execution de la fonction). Elle sera initialisee a 0 au 
moment du chargement de la page dans le navigateur. Ensuite, quand 
l'internaute cliquera sur le bouton SUBMIT, il incrementera la valeur a 1. 
Ainsi, si l'internaute clique une deuxieme fois sur le bouton, une alerte 
s'affichera et ce deuxieme envoi sera bloque. Cette fonction evite 
d'envoyer les donnees deux fois. L'internaute perd patience quand le 
serveur est encombre et que la deuxieme page est longue a s'afficher. 

Maintenant que vous avez compris le principe, creons les autres fonc- 
tions : verif_champs() et verif_email (). Comme son nom 1'indique, 
la premiere fonction verifie que les champs du formulaire sont renseignes, 
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tandis que la deuxieme verifie que le texte entre est pourvu d'un arobase 
qui caracterise une adresse e-mail. Cette demiere fonction est peu 
sophistiquee mais elle suffit car nous relevons les erreurs involontaires. II 
est difficile de deceler une fausse adresse e-mail dans la mesure ou elle est 
bien formatee. Le formulaire de la premiere page contient cinq champs 
dont quatre champs text. Le dernier est un menu. 

Pour verifier que du texte a ete entre, nous utilisons la propriete 
length qui donne la longueur de l'objet String. 

La fonction veri f_champs() : 

function veri f_champs() { 

i f (document .forms [0] .prenom.val ue. 1 ength<l) { 

alert ("Veui 1 lez ajouter votre prenom, Merci"); 

document. forms [0] .prenom. focus () ; 

return false;} 
i f (document .forms [0] . vi 1 1 e. val ue.l ength<l) { 

alert("Veuillez ajouter votre ville, Merci"); 

document. forms [0] . ville. focus() ; 

return false;} 
i f (document .forms [0] .code_postal .val ue.l ength<l) { 

alert ("Veui 1 lez ajouter votre code postal, Merci"); 

document. forms [0] .code_postal . focus () ; 

return false;} 
i ndex_pays=document . forms [0] . pays . sel ectedl ndex; 
1 epays= document .forms [0] .pays .options [index_pays] . val ue; 
if (lepays==0){ 

alert ("Veui 1 1 ez definir votre pays, Merci"); 

return false;} 
i f (document .forms [0] .emai 1 .val ue.l ength<5) { 

alert ("Veui 1 1 ez ajouter votre email, Merci"); 

document. forms [0] .email . focus () ; 

return false;} 
return true; 
} 

La fonction veri f_emai 1 () : 

function verif_email () { 

var c=document .forms [0] .emai 1 . val ue; 

var test="" + c; 

for(var k = 0; k < test.length;k++) 

{ 

var d = test.substring(k,k+l) ; 
if {d == "(?") 
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{ 

return true; 



alert("Votre E-mail n'est pas valide, Merci"); 
document. forms [0] .email . focus () ; 
return false; 

} 

La fonction envoi () : 

function envoi () { 
if (unique == 0) { 
unique++; 
return true; 

} 

else { 

alert("Envoi en cours...!"); 
return false; 

} 
} 

A chaque fois que la fonction envoie un return, son execution s'arrete. 
C'est pourquoi nous avons place l'expression return true apres tous les 
tests. Chaque test faux arrete la chaine d'execution. Pour que le formulaire 
soit envoye, il faut qu'il regoive un return true. Nous allons done creer 
une fonction maitre regroupant les trois fonctions, qui s'appellera veri f- 
_formulaire(). Cette fonction retournera true seulement si les trois 
fonctions sont vraies. 



function verif formul ai re() { 




if (verif champs()==true && verif emai 1 () ==true & 


& envoi ()==true) { 


return true; 




} 

return false; 

} 





Le script complet est sur le site. II vous suffit maintenant d'appliquer ce 
que vous venez d'apprendre sur la deuxieme page. Vous aurez neanmoins 
besoin de faire un test supplementaire sur les deux champs du mot de 
passe et sur la longueur du mot de passe qui doit depasser sept caracteres : 



i f (document .forms [0] .mot_passe. val ue. 1 ength<8) { 
alert("Veuillez ajouter votre mot de passe de 
plus de 7 caracteres, Merci"); 
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document. forms [0] .mot_passe.focus() ; 
return false; 



if (document. forms[0] .mot_passe.value!= 
document .forms [0] .mot_passebi s . val ue) { 
alert("Vos mots de passe ne coincident pas, 
veuillez les taper a nouveau, Merci"); 
document. forms[0] .mot_passe.focus() ; 
return false; 



La methode focus () placera le curseur dans le champ mot _passe en cas 
d'erreur. 



Vos mots de passe ne coincident pas, veuillez les taper a nouveau, Merci 



▲ Figure 4.7: Verification en langage Javascript 

Javascript est tres pratique et assez simple a utiliser. II est des cas, 
cependant, oii il n'est pas possible de s'en servir. 



Nous ne pouvons utiliser Javascript pour verifier des champs qui envoient 
un tableau dans le cas des groupes de cases a cocher et des menus 
deroulants a choix multiple. Pour que le programme PHP, qui traite le 
formulaire, puisse prendre en compte un de ces champs, il nous faut 
aj outer des crochets dans le nom, ce que Javascript ne reconnaitra pas 
comme un nom de champ. 



Le formulaire avec une selection multiple 



Reprenons l'exemple de pays qui permettrait plusieurs selections si nous 
posions la question de la nationalite et non celle du pays. Ainsi le candidat 
pourrait choisir plusieurs options en cas de double nationalite : 




I OK 1 



Le code PHP 
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<tr> 

<td>Votre nationality (<i>Vous pouvez selectionner plusieurs pays 
en appuyant sur la touche "ctrl" tout en cliquant sur la selection 

</i>)</td> 

<tdxinput type="text" name="pays [] " size="l" mul ti pi ex/td> 
</tr> 
<? 

echo '<select name="pays">' ; 

echo '<option value="" selectedx/opti'on>' ; 

$sql="select * from pays"; 

$resul tat=@mysql_query ($sql ,$id_l ink) ; 

while ($rang=mysql_fetch_array($resultat)) { 

$code=$rang[ 1 code '] ; 

$nom=$rang[ 1 nom 1 ] ; 

echo "<option val ue=\"$code\">$nom</option>" ; 

} 

echo '</select>' ; 
?> 

Le traitement du formulaire 

Ici les valeurs du tableau sont de longueurs egales (trois caracteres), ce qui 
en simplifie le traitement : 

<? 

incl ude "commun/connexion. inc.php" ; 

$pays=$_P0ST[' pays'] ; 

if (is_array($pays)) { 

foreach (pays as $cl ef=>$val eur) { 

$tousl es pays .=$ val eur; 

} 

$pays=$tousl espays; 

Ssql = "INSERT INTO membres (prenom, code_postal , ville, pays, email) 
VALUES ('$prenom', ' $code_postaT , '$ville', ' Spays 1 , 1 $emai 1 1 ) " ; 
@mysql_query ($sql , $ i d_l ink); 

?> 

Les differents elements ont ete concatenes. Chaque membre peut avoir trois 
nationalites et chaque pays possede un code de trois caracteres. II vous faut 
elargir la colonne a douze caracteres pour conserver un peu de marge. 

Ensuite, il sera facile de recuperer les donnees dans un tableau avec un 
substrQ : 



for($i=0;$i<strlen($pays) ;$ 


i=3){ 


$code pays [] =substr($pays ,$ 


i,3); 


} 
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Maintenant, nous allons verifier si une ou plusieurs options ont ete 
selectionnees dans le champ pays[ ] : 

if (!$pays[]){ 

include "inscri pti on_pl . php" ; 

exit; 

} 

Si aucune option n'a ete selectionnee, la variable $pays[] est vide, 
c'est-a-dire qu'elle a ete transmise par le programme mais que sa valeur 
est vide. 



isset() et empty() 

Dans le cas de empty () , la valeur a ete initialisee mais elle ne 
contient pas de valeur, alors que la fonction issetQ interroge la 
variable pour savoir si elle a ete initialisee, et done si elle existe. 



A l'interieur de ce bloc de test, nous utilisons la commande include. Ainsi 
le contenu de la premiere page va s'afficher a l'interieur de la page 
courante. La commande exit est placee arm d'eviter que la page 2 
n'apparaisse a la suite de la page 1. 





include 

Dans le champ du navigateur apparaTtra I'URL de la page 2 
car ici, la page 1 est seulement incluse. L'internaute a besoin 
d'une explication sur le retour a cette premiere page. Nous pouvons 
afficher une annonce dans un bloc de test contenu dans la premiere 
page. II suffit alors de I'afficher si la variable Apache $REQUEST_URI ne 
correspond pas a la page du script (en I'occurrence, cette variable 
donnera I'adresse de la page 2 et non de la page 1) : 

If (ereg($REQUEST_URI, ' i nscription_p2.php 1 ) { 
echo ' <font col or="#FF0000">Veui 1 1 ez selectionner au moins 
un pays, Merci .</font>' ; 



Ici I'annonce apparaTtra en rouge si la page a ete appelee par une 
commande include lancee de la page 2. 
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Le visiteur n'a encore insere aucune donnee et il est revenu a son point de 
depart. II lui faudra renseigner a nouveau tous les champs. Nous allons 
done inserer la valeur qu'il avait entree dans chaque champ afin de lui 
eviter cette corvee. D'autre part, dans d'autres circonstances, cette 
operation permettra a l'internaute, comme nous allons le voir plus loin, de 
modifier lui-meme ses coordonnees en cas de changement d'adresse. 

Nous afficherons chaque champ par un echo, de facon a afficher la valeur 
de la variable qui correspond a chaque champ. 

Revoyons les quatre premiers champs de la page 1 : 

<? 

if (ereg($_SERVER[' REQUEST_URI '] , ' i nscri ption_p2.php ' ) { 
echo '<pxfont col or="#FF0000">Veui 1 lez selectionner au moins 
un pays, Merci .</fontx/p>' ; 

} 

?> 

<form action="inscription_p2.php" method="post" 

onSubmi t="return veri f_formul ai re() "> 
<table eel 1 spacing="2" eel 1 paddi ng="2" border="0"> 
<tr> 

<td>Votre prenom :</td> 

<td> 

<? 

echo "<input type=\"text\" name=\"prenom\" val ue=\"$prenom\">" ; 
?> 

</td> 
</tr> 

Nous faisons la meme manipulation sur le reste des champs du formulaire. 
Nous incluons ici la variable qui nous a ete envoyee par chaque champ au 
moment ou l'internaute a soumis le formulaire. Nous devons ajouter des 
caracteres d'echappement a chaque guillemet. Ainsi il n'aura plus besoin 
d'entrer les memes renseignements. D'autre part, nous pourrons utiliser 
cette facilite quand l'internaute voudra modifier ses donnees personnelles. 
Pour anticiper cette modification, nous allons operer de la meme facon sur 
le champ pays. 

Une option dans un menu deroulant est selectionnee par defaut par 
l'attribut SELECTED dans sa balise, il nous suffit done de modifier 
legerement le code pour l'integrer dans le menu deroulant pays : 
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<? 

echo '<select name="pays">' ; 

echo '<option value=""x/option>' ; 

$sql="select * from pays ORDER BY ordre DESC, nom ASC"; 
$resul tat=@mysql_query ($sql ,$id_l ink) ; 

whi 1 e ($rang=mysql_fetch_array ($resul tat) ) { 

$code=$rang['code'] ; 

$nom=$rang[ 1 nom 1 ] ; 

echo "<option val ue=\"$code\"" ; 
if ($pays==$code) { 
echo " SELECTED"; 
} 

echo ">$nom</option>" ; 
} 

Dans cet exemple, nous avons ajoute un test pour savoir si la variable 
code courante correspondait a la variable pays. Si le cas se presente, nous 
ajoutons SELECTED. Notre but est d'afficher l'option precedemment 
choisie. 

<option value="BEN" SELECTED>Benin</option> 

L'internaute ne pourra valider ses donnees tant que le format ne sera pas 
conforme. 

Variables predefines liees au chemin ou a I'URL 

Ces variables sont utilisees pour faire une application qui fonctionne sur 
tout serveur, puisque ces noms se modifient suivant FURL. Elles 
permettent done de creer des applications portables. 




Voyez I'application Ecoute de fichiers dans le chapitre Moteurs 
de recherche et expressions rationnelles. 



Tab. 4.8 : Les variables predefinies 


Variable 


Description 


$D0CUMENT_R00T 


Chemin a partir de la racine des documents 


$PATH_TRANSLATED 


Chemin local propre au serveur 
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Tab. 4.8 : Les variables predefines 


vanaDie 




■tOlI FRY STRTNG 


nnnnppQ niii q i i nt Ip nnint rl'intprrnnatinn riant; I'l IRI na^ppc; 
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avec la methode get 


$REQUEST_URI 


Adresse affichee dans le champ location du navigateur 


$SCRIPT_FILENAME 


Chemin complet du fichier 


$SCRIPT_NAME 


Chemin du fichier relatif au repertoire wimvou htdocs 



4.1 2 Tout sur un seul fichier : oubli.php 

Nous allons maintenant preparer un formulaire qui apparaitra dans une 
fenetre en cas d'oubli du mot de passe. C'est un simple formulaire avec 
deux champs : nom d' usage et reponse, precede de la question, puis vient 
la page avec l'annonce qui vient d'etre envoyee par courriel. Tous ces 
traitements seront reunis sur un fichier. 

L'information est regue par courriel pour authentifier l'adresse e-mail. 
Nous verrons qu'il est interessant aussi d'envoyer regulierement une lettre 
aux membres et d'y inclure le nom d'usage avec le mot de passe arm de 
le leur rappeler. 

La reflexion 

Le formulaire peut se rappeler lui-meme avec la variable $PHP_S ELF. 
Nous pouvons egalement utiliser un champ cache passage pour marquer 
chaque etape a l'interieur d'une variable. Les champs caches posent un 
probleme de securite car il suffit qu'un internaute recupere la source du 
formulaire, modifie ce dernier et le soumette pour creer une faille dans la 
securite. II vaut mieux l'utiliser uniquement pour des marqueurs ou pour 
passer des numeros d'identification complexes, impossibles a inventer. Ici 
nous l'employons comme marqueur et sa modification ne permet a 
F internaute de recuperer aucun mot de passe. 
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La plate-forme commune 

Voici la plate-forme commune pour ce fichier : 
<? 

i ncl ude "commun/connexion. i nc.php" ; 
?> 

<html> 
<head> 

<title>Oubli</title> 

<meta http-equi v="Content-Type" content="text/html ; 

charset=i so-8859-l"x/head> 
<body bgcol or="#FFFFFF" text="#000000"> 

<? 

echo "<form name=\"forml\" method=\"post\" action=\"$PHP_SELF\">" ; 

?> 

</form> 
</body> 
</html> 

Tous les autres elements sont optionnels. lis dependent des etapes suivies 
par l'internaute. 

Les variables comme marqueurs 

A chaque etape, un champ cache dans le formulaire decrira l'etape 
suivante. La premiere etape est sans marqueur. A l'etape 2, nous 
entreposons la variable $nom_usage, necessaire pour interroger ensuite la 
table membres sur la reponse a la question. Enfin si la reponse est vraie, 
un bouton apparait pour fermer la fenetre. Si la reponse est fausse, 
l'internaute se voit proposer une nouvelle tentative. Dans ce dernier cas, 
la variable passage contient le chiffre 3, nous la reduisons a 0 pour 
recommencer le processus jusqu'a 3 fois. Pour limiter les tentatives a 3, 
nous stockerons une variable tentative dans une session. Au bout de 
trois, nous proposerons a l'internaute d'envoyer un courriel au webmestre 
qui jugera bon ou non de lui envoyer son nom d'usage et son mot de 
passe. C'est pourquoi les champs du formulaire (dont le bouton Soumet- 
tre), les requetes SQL et l'affichage en general dependront du deroule- 
ment de chaque etape. 
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Les sessions 

Si dans une page, vous avez besoin d'une variable de 
session, il faut la reactiver avec la fonction session_start() 
placee en haut de la page. Cette fonction cree une session ou reveille 
la session courante si elle existe. Si vous utilisez la fonction 
session_register(), la fonction session_start() est implicite, vous 
n'avez done pas a la rajouter. 



Premier passage : $passage==0 

La premiere etape repose sur la non existence de la variable passage : 
If (!$passage){ 

II est possible d'utiliser not qui decrit une variable non initialisee, ou 
contient une valeur vide ou une valeur numerique 0. 

Nous affichons un champ nom_usage. Dans le formulaire, nous ajoutons : 

$passage=$_GET[ 1 passage '] ; 
if (!$passage){ 

echo ' Votre nom d'usage : <input type="text" name="nom_usage">' ; 

echo ' <input type="hidden" name="passage" val ue="l">' ; 

echo '<BRxinput type="submit" name="Submit" val ue="Soumettre">' ; 

} 

Nous avons ajoute un champ cache qui initialisera la variable passage a 1 
pour l'etape suivante lors de l'envoi du formulaire. 

Deuxieme passage : $passage==1 

Nous testons la valeur de la variable passage. Auparavant, nous allons 
conserver le nom d'usage du membre pour creer les requetes suivantes 
afin de rechercher la question puis comparer les reponses et lui envoyer 
une reponse par courriel a la troisieme etape. 

session_regi ster("nom_usage") ; 
if ($passage==l) { 

$sql="select question from membres where nom_usage= ' $nom_usage ' " ; 
$resul tat=@mysql_query ($sql ,$id_l ink) ; 
$rang=mysql_fetch_array ($resul tat) ; 



148 • Double Poche PHP & MySQL 



Tout sur un seul fichier : oubli.php 



$question=$rang['question'] ; 
} 

Nous affichons ensuite la question et le champ reponse : 
elseif ($passage==l) { 

///suite au if (!$passage) mis plus haut//// 
echo $question; 
echo "<BR>\n"; 

echo ' Votre reponse : <input type="text" name="reponse">' ; 

echo '<input type="hidden" name="passage" value="2">'; 

echo '<BRxinput type=" submit" name="Submi t" val ue="Soumettre">' ; 

} 



Les variables de session 

Une session est I'unite de temps pendant laquelle I'internaute 
visite des pages sur un site. Les variables entreposees dans une 
session conservent leur valeur au fil des pages. Pour entrer une 
variable dans une session, il suffit d'utiliser la fonction session regis- 
ter(). Attention, el 1 e ne prend pas la variable comme parametre 
mais son nom, ici nom usage. 



Troisieme passage : $passage==2 

Nous testons la presence de la variable $reponse : 



if ($passage==2) { 

$sql="select nom_usage, mot_passe, reponse from membres 
where nom_usage= ' $nom_usage 1 "; 
$resul tat=@mysql_query ($sql ,$id_l ink) ; 
$rang=mysql_fetch_array ($resul tat) ; 
$reponse_vraie=$rang[ 1 reponse '] ; 
$mot_passe =$rang['mot_passe'] ; 
$reponse =strtol ower($ ($reponse) ; 
} 



Puis nous affichons le resultat : 



if ($passage==2) { 

if ($reponse==$reponse_vraie) { 

echo "Votre reponse est exacte, nous venons de vous 
envoyer un email avec votre mot de passe"; 
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echo "<BR>\n"; 

echo "<input type=\"submi t\" name=\"Submit\" 
val ue=\"D ' accord !\" onCl i ck=\ "window. cl ose() \">" ; 
$message="Bonjour" ; 
} 

else { 

echo "Votre reponse est incorrecte!</a>" ; 

echo '<input type="hidden" name="passage" value="3">'; 

echo "<BR>\n"; 

echo "<input type=\"submit\" name=\"Submit\" 
val ue=\"Tenter une nouvelle fois ?\">"; 

} 
} 



^ Fichier Edition Afficher Rechercher Aller a Signet: 

^ - a i 

PrecedWt Recharger Arreter 

^ -ii Origine talNetscape.fr ^Recherche ,'~\ ShopOW 



1 



Quel est le nom de jeune fille de \ otre mere ? 
Votre reponse : | J 
Soumettre | 

a a & l^lrf 1 ! 



-* Figure 4.8 : 

La troisieme 
etape de 
I 'application, 
oubli 



Vous avez sans doute remarque dans la premiere partie de cette etape que 
nous n'avons pas utilise whi 1 e. Effectivement, ce n'est pas necessaire car 
nous recherchons une seule ligne. 

Les tentatives $passage==3 

Pour la deuxieme tentative, nous vidons la variable passage pour revenir 
au debut de la premiere etape. Nous allons limiter le nombre de tentatives 
en enregistrant la variable $tentati ve dans la session courante : 

if ($passage==3) { 
$passage=" "; 
if (!$tentative){ 
$tentative=l; 

} 

else{ 

$tentati ve++; 
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} 

session_register(tentative) ; 

} 

Ainsi quand l'internaute atteint la fin de la troisieme tentative avec une 
reponse fausse a la question, un nouvel ecran lui demande d'envoyer un 
courriel au webmestre. 

L'ouverture d'une fenetre avec une fonction 
Javascript 

Le formulaire oubli.php n'a pas besoin de tout 1' ecran pour s'afficher, 
nous allons done creer une nouvelle fenetre avec une fonction Javascript 
que nous appellerons ouvri r_vasi stas () : 

<SCRIPT LANGUAGE=" JavaScri pt"> 
<!-- 

function ouvri r_vasi stas (adresse, nom_fenetre,caracteristiques) { 
window. open (adresse, nom_fenetre,caracteristi ques) ; 

} 

</SCRIPT> 

Quittez la page oubli.php et dans votre page d'accueil, ajoutez le lien : 

Vous etes deja membre et vous avez peut-etre 
<a href="#" 

onCl i ck=" ouvri r_vasi stas( 'oubl i . php 1 , 1 vasi stas ' , 'menubar=no, 
scrol 1 bars=no,statusbar=no, wi dth=300, height =200 ' ) "> 
oublie votre mot de passe</A>. 

L' application est alors bouclee. 

4.1 3 Recapitulation de la syntaxe 
des re qu etes 

Au cours de ce chapitre, l'apprentissage de la syntaxe SQL et des 
fonctions MySQL a ete dispense au fur et a mesure des applications. 
Recapitulons-les. 
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Voici d'abord les principales commandes SQL. Ce sont des commandes 
communes a la plupart des bases de donnees. Seule leur syntaxe peut 
presenter des petites particularites (les types de guillemets...). 



Tab. 4.9 : Les principales commandes SQL 


Commande 


Description 


Syntaxe 


CREATE 


Cree une table 


CREATE TABLE nomjable 
[nom_colonne type{longueur)...) 


DELETE 


Efface des donnees 


delete from nomjable 


INSERT 


Insere des donnees 


INSERT INTO nomjable 
[{colonnel,...)] values 
{valeur_colonne1 ,...) 


SELECT 


Extrait des donnees 


SELECT nom_colonne1... FROM 
nomjable 



UPDATE 



Modifie des 
donnees 



UPDATE nomjable SET 
nom_colonne1= 'nouvelle_valeur' 



Les fonctions de MySQL presentent l'inconvenient de consommer de la 
ressource serveur, surtout si votre base est bien remplie. Mais elles 
permettent de vous epargner des lignes de codes en langage PHP. 



Tab. 4.10 : I 


}uelques fonctions MySQL 




Fonction 


Description 


Syntaxe 


AVG() 


Retourne la moyenne des differents 
nombres 


AVG(nom colonnel) 


COUNT () 


Compte le nombre de lignes 


COUNT (*) 


randq 


Permet d'effectuer un tri aleatoire avec 

ORDER BY 


ORDER BY RAND () 
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Voici un certain nombre de clauses SQL qui modulent le resultat : 

WHERE 

Determine les donnees sur lesquelles s'appliquent les commandes SQL 
DELETE, SELECT, UPDATE 

Syntaxe: WHERE nom_colonne='valeur' 
Options AND, OR, NOT 

Exemple DELETE FROM nom_table where nom_col onnel=2 OR 
nom_col onnel=5 

Explication AND : les deux expressions sont vraies, OR : une expression 
est vraie, NOT : une expression est fausse. Ces trois 
operateurs peuvent se combiner avec des parentheses 

Prenons par exemple : 

SELECT * from membres where (pays= ' HTI ' OR pays= ' DMA' ) 
AND datejnisajour BETWEEN 20020401 AND 20020430. 

Les parentheses donnent des priorites, ainsi OR est traite avant AND. 

DISTINCT 

Regroupe les donnees identiques 

Syntaxe: DISTINCT nom_colonne 

Options sans 

Exemple SELECT DISTINCT nom_colonnel FROM nonstable 

Explication retire les doublons du resultat 

GROUP BY 

Regroupe les donnees identiques 

Syntaxe: GROUP BY nom_colonnel, nom_colonne2... 
Options sans 



Double Poche PHP & MySQL • 1 53 



4 MySQL en action 

Exemple SELECT * FROM nom_tabl e where nom_colonnel=2 GROUP 
BY nom_colonne2 

Explication partitionne les resultats par champ sur lesquels il effectue les 
fonctions 



ORDER BY 



Ordonne les donnees selon la ou les colonnes choisies 

Syntaxe : 
Options 
Exemple 



Explication 



ORDER BY nom_col onnel , nom_col onne2... 

ASC (par defaut) : ordre croissant), DESC : ordre decroissant 

SELECT * FROM nom_tabl e where nom_colonnel=2 ORDER 
BY nom_colonne2 DESC 

trie selon l'ordre de la table des caracteres ASCII (chiffre, 
capitale, bas de casse...) 



LIMIT 



Limite le resultat de la requete a un certain nombre de lignes 

Syntaxe: LIMIT nombre_de_l ignes 

LIMIT [ligne_de_debut,] nomb re _de_l ignes 

SELECT * FROM nom_tabl e where nom_colonnel=2 LIMIT 
2, 30 

Les lignes sont numerotees a partir de 0 



Options 
Exemple 



Explication 



Voici encore quelques clauses : 



Tab. 4.11 : Quelques clauses 




Description 


AS 


Designe une donnee par un alias. 


LIKE 


Permet une recherche sur une partie de la valeur du 
champ avec des caracteres generiques comme % ou . 


RLIKE 


Permet une recherche avec des expressions 
rationnelles. 
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Recapitulation de la syntaxe des requites 

$sql="select C0UNT(*) as compte, pays.nom as nation from membres, 
pays where pays. code=membres. pays GROUP BY nation"; 
$resul tat=@mysql_query ($sql ,$id_l ink) ; 
whi 1 e($rang=@mysql_fetch_array ($resul tat) ) { 
$nation=$rang[ ' nation '] ; 
$compte=$rang[' compte 1 ] ; 

echo "<TRxTDxfont face=\"Tahoma, Arial\" size=\"l\">$nation : 
</fontx/tdxTD> 

<font face=\"Tahoma, Arial\" size=\"l\">$compte</fontx/tdx/tr>"; 

} 

Dans ce programme, vous considerez le nombre de membres de votre club 
par pays. 

Nous utilisons la fonction COUNT (*) pour compter le nombre de lignes qui 
sont ensuite regroupees par pays, ce qui nous donne le nombre de 
membres par pays. Nous utilisons AS pour donner un alias au nombre et 
un autre au pays. Nous definissons le champ avec la table, ainsi 
pays. code designe le champ code dans la table pays. 

Voici une requete composee avec LIKE : 

$sql="select C0UNT(*) as compte from membres, pays where 
membres. nom_usage LIKE 'b%'"; 

Dans cette requete, % remplace plusieurs caracteres. Ainsi la recherche se 
fait sur le nombre de membres dont le nom d'usage commence par b. Si 
nous avions utilise ' %b% ' , la requete aurait demande a la base de trouver 
un nom d'usage comportant la lettre b. Le caractere _, lui, remplace un 
seul caractere. 

$sql="select C0UNT(*) as compte from membres, pays 
where membres. nom_usage LIKE 'b 111 ; 

Dans cette requete, nous avons insere trois blancs soulignes, cela signifie 
que nous comptons le nombre de membres dont le nom d'usage 
commence par b et comprend quatre lettres. 

Au cours des chapitres suivants, vous retrouvez ces fonctions dans 
di verses applications. 
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4 MySQL en action 

4.14 Les procedures stockees 

Avec sa version 5, MySQL propose l'utilisation de procedures stockees. 
Ce type de fonctionnalite economise du code PHP et rend les requetes 
reutilisables. Cela cree une sorte d'interface entre la base de donnees et le 
script. La commande est compilee sur le serveur et est alors disponible 
pour des requetes. L'application PHP appelle la procedure en lui envoyant 
de nouveaux parametres, celle-ci s'execute en une fois et renvoie un 
resultat. L'operation est plus rapide qu'une requete envoyee simplement 
par une fonction PHP car la requete n'a besoin d'etre analysee qu'une 
seule fois. Cette version repondra a la norme SQL 2003. 

4.15 SQLite 

SQLite est proposee avec la version 5 de PHP. C'est une base de donnees 
sans serveur. Elle se sert de fichiers pour stocker ses donnees, ce qui la 
rend tres rapide et tres simple a mettre en place. Le fichier est verrouille 
pour toute requete pendant un acces en ecriture, ce qui rend SQLite 
impropre a une utilisation comportant de nombreux acces ecriture. 

Une des particularites de SQLite est que vous pouvez creer une base dans 
la memoire pour faire une operation pendant la duree de votre script. 

$db = sql i te_open( ' :memory: ' ) ; 

Imaginons que vous desirez proposer les codes postaux francais sur votre 
site. 

$commune=$_P0ST [ ' commune ' ] ; 
if ($commune) { 

$db = sql i te_open( ' codesPostaux.db ' ) ; 

// cette fonction ouvre une base existante ou en cree 

// une si elle n'existe pas 

$sql = "SELECT commune, codepostal from liste where commune LIKE 
'%$commune%' "; 

$resultat = sql i te_query ($db, $sql ); 

echo "Resultats trouves :<UL>" 

while ($rang = sql i te_fetch_array ($resul tat)) { 

$commune=$rang['commune'] ; 

$codepostal=$rang['codepostal '] ; 

echo "<LI>$commune $codepostal</LI>" 

} 

echo "<UL>" 
sqlite_close($db); 
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SQLite 



} 

echo <form method=\"post\" action=\"$PHP_SELF\">" ; 

echo 'Tapez le nom de la commune<i nput name="commune" size="20"> 

<input type="submit" val ue="Chercher"> 

</form>' ; 



Les droits sur votre repertoire de base de donnees 

N'oubliez pas de donner des droits d'ecriture a votre reper- 
toire de travail. 



Cette base est tres facile a monter et comporte de nombreuses fonction- 
nalites comme la possibilite de faire des requetes imbriquees pour des 
tables jointes par exemple dans le cas d'un catalogue de livre ou la 
collection est represente par un numero qui est reporte dans une table 
collections avec le nom en clair : 

SELECT titre FROM catalogue WHERE collection = 
(SELECT code FROM collections WHERE nom = 'e-poche') 

ou 

SELECT catalogue. titre FROM catalogue, collections 
WHERE catal ogue. col 1 ection = collection. code 
AND col lection. nom = 'e-poche' 

Un autre des traits de SQLite est la possibilite d'y enregistrer des 
fonctions PHP. Par exemple, vous pouvez decider, pour continuer l'exem- 
ple precedent de glisser une espace dans le code postal pour mettre en 
valeur le numero de departement comme par exemple 35 270 

function formater_codepostal ($codepostal ) { 

return substr_repl ace($codepostal , ' ', 2, 0); 

} 

sql ite_create_function($db, ' f ormat_code ' , ' formater_codepostal ' , 1); 
$rangs = sql ite_array_query ($db, 'SELECT format_code( ' codepostal ' ) 
from ' codePostaux.db ' ) ; 



Cette presentation succincte sert d'introduction a cette base de donnees 
qui propose avec simplicite un certain nombre de fonctionnalites tres 
utiles tout en ayant une capacite de 2 teraoctets. Elle est adequate pour 
tout site web moyen, c'est-a-dire la grande majorite des sites. 
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Le langage PHP, rappelez-vous, est un langage procedural, c'est-a-dire 
que 1' application parcourt le fichier PHP ligne a ligne, de droite a gauche, 
lisant les instructions au fur et a mesure d'une maniere lineaire. PHP 4 a 
integre la programmation objet d'une facon hybride, c'est-a-dire sans en 
integrer toutes les implications. En PHP 4, on peut eviter d'utiliser la 
programmation objet et programmer ce que Ton veut. Si maintenant vous 
desirez exploiter les nouvelles possibilites de PHP 5, qui a particuliere- 
ment developpe cet aspect, il vous faut en comprendre les multiples 
aspects. 



include_once "../commun/fonctions.inc.php"; 




▲ Figure 5.1 : Langage procedural 

Nous verrons les differences de conception entre PHP 4 et PHP 5 en fin de 
chapitre pour ne pas nuire a la clarte de l'explication. 

Pourquoi vouloir encombrer PHP avec une option qui lui est etrangere, 
telle que celle d'objet ? 
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Qu'est-ce que I'objet ? 

5.1 Qu'est-ce que I'objet ? 

Le livre que vous tenez en main est un objet ; le siege sur lequel vous etes 
probablement assis est un objet. C'est un element autonome et entier avec 
des proprietes et des fonctions. 

C'est une capsule percee de plusieurs ouvertures. Ces capsules sont des 
unites independantes du contexte dans lequel elles sont utilisees, elles 
peuvent done etre utilisees dans tous les contextes. Vous pouvez voir ces 
capsules comme des briques de programme. Ces bouts de programmes 
sont done autonomes. 




$monvelo=new velo (); 



▲ Figure 5.2 : Langage a objets 

La classe est le modele, et I'objet est une creation a partir de ce modele 
(une instance). La classe est le prototype et I'objet, son application dans 
des situations concretes. 

Cet objet a des proprietes ou des attributs. Ces proprietes sont portees par 
des variables a l'interieur de la classe. Les fonctions ou methodes de la 
classe concernent les actions traitees par cette classe. Une des fonctions de 
la civilisation est de classer differents objets. 
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Pour creer une classe, il faut d'abord modeliser un objet, c'est-a-dire 
distinguer et choisir les differentes proprietes et methodes dont vous avez 
besoin pour le generer. 

Prenons l'objet deux-roues ; nous allons enumerer les differentes proprie- 
tes qui le distinguent d'un autre deux-roues : 

■ la couleur ; 

■ la taille ; 

■ l'etat. 

Examinons la liste. La derniere propriete est de moins en moins 
pertinente, nous 1'enleverons done de notre liste. 

On peut deja creer une classe deux_roues 

class deux_roues { 
var $couleur; 
var $tai 1 1 e= ' adul te ' ; 
var $etat="est arrete"; 

function deux_roues ($couleur, $taille, $etat) { 
$this-> couleur = $couleur; 
$this-> taille = $taille; 
$this-> etat = $etat; 

} 

function affiche (){ 

echo "mon deux-roues " .$thi s->coul eur. " ". $this->etat. ". II est 
de taille " . $thi s->tai 1 1 e. " et de type " . $this->type. " 
avec " . $thi s->nbreVi tesses . " vitesses."; 

} 

function rouletil () { 
$thi s->etat; 

setlocale (LC_ALL, 'fr_FR'); 
$moment=strftime ("%A %e %B %Y a %H %M"); 
$thi s->moment=$moment; 

echo "Ce deux-roues" . $thi s->etat. "$moment" ; 



Nous avons ici une classe avec les attributs et la methode deux_roues () . 
Comme vous l'avez remarque, cette methode porte le meme nom que la 
classe, ce qui la designe comme constructeur. Cette methode va servir a 
construire l'objet quand la classe sera appelee avec la methode new(). 
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L'heritage 



A l'interieur de la fonction, nous employons la variable this accompa- 
gnee de l'operateur ->. La variable this est une variable passe-partout 
qui evite de donner a chaque fois un nom pour une variable qui est locale 
a la classe et done temporaire. L'operateur -> reference une classe, une 
methode ou une propriete d'une classe. 

Pour appeler l'objet deux_roues : 
include("deux_roues_class.php") ; 

$mondeux_roues=new deux_roues( 1 vert ' , 'enfant', 'roule'); 
echo "Mon deux-roues est " .$mondeux-roues ->couleur; 
echo "Mon deux-roues ". $mondeux-roues ->roul eti 1 () ; 

La premiere ligne inclut la classe deux_roues. II est conseille de mettre 
une seule classe par fichier pour pouvoir s'y retrouver par la suite. 

La deuxieme ligne appelle la classe deux_roues pour en creer une 
instance nominee $mondeux_roues a laquelle j'envoie des attributs. 
Dans le cas du PHP 4, le programme cree une copie de l'objet. Cette 
operation est consommatrice de ressources, ce qui ralentit l'operation. Le 
second probleme est que vous agissez non pas sur l'objet lui-meme mais 
sur sa copie. 

5.2 L'heritage 

Dans la categorie, il existe plusieurs types d'objets comme velo, moto. 
Ces objets sont derives de l'objet deux-roues. La classe deux-roues est la 
classe parente de la classe velo, qui est une classe derivee. 

Avec le PHP 4, une classe ne peut heriter que d'une seule classe parente. 
Les heritages se font avec le mot cle ' extends '. La classe derivee herite 
des proprietes et des methodes de la classe parente tout en ayant la 
possibilite d'ajouter les siennes. 

class velo extends deux_roues{ 
var $nbreVitesses=18; 
var $type="VTT"; 

function velo ($nbreVi tesses, $type) { 
$thi s-> nbreVitesses = $nbreVitesses; 
$this-> type = $type; 
$this-> etat = $etat; 
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} 

} 

Pour appeler cette classe derivee : 

incl ude("deux_roues_cl ass .php") ; 
i ncl ude("vel o_cl ass .php") ; 
$monvelo=new velo (); 
$monvel o->etat = "roule"; 
$monvel o->coul eur = "rouge"; 
$monvelo->taille = "adulte"; 
$monvelo->nbreVi tesses = "12"; 
$monvelo->type = "VTC"; 

echo "mon velo " .$monvelo->couleur. " " .$monvelo->etat . " . II est de 
taille " .$monvel o->tai 1 1 e. " et de type " .$monvelo->type. " avec 
"$monvel o->nbreVi tesses. " vi tesses . " . " ; 

Si la classe derivee contient une propriete ou une methode contenue dans 
la classe parente alors c'est la methode ou la propriete cette classe derivee 
qui prevaut sur celles de la classe parente. 

class velo extends deux_roues{ 

var $nbreVi tesses=18; 

var $type="VTT"; 
function velo ($nbreVitesses, $type) { 

$thi s-> nbreVitesses = $nbreVitesses; 

$this-> type = $type; 

$this-> etat = $etat; 

$this-> identite="mon velo "; 

} 

function affiche (){ 

echo $thi s->i denti te.$thi s->coul eur. " ". $this->etat .". II est de 
taille ". $thi s->tai 1 1 e ." et de type ". $this->type ." avec ". 
$this->nbreVi tesses . " vi tesses."; 

} 

} 

Nous utilisons ici une methode du meme nom, affiche (). Si nous 
utilisons la methode affiche () de la classe velo, nous n'avons plus 
acces a la methode affiche() de la classe deux_roues. 

Maintenant, nous allons faire une classe velomoteurs et motos. 

class velomoteur extends deux_roues{ 
var $pui ssance=750; 
var $type="routiere" ; 
var $marque="Honda" ; 

function velomoteur ($puissance, $type, $marque) { 
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Surcharger une methode 



$this-> puissance = $puissance; 
$this-> type = $type; 
$this-> marque = $marque; 
$this-> identite="ma moto "; 

} 

function affiche (){ 

echo $thi s->i denti te.$thi s->couleur. " " 
.$this->etat.". II est de taille " 
.$thi s->tai 11 e. " et de type " .$this->type. " avec 
. $thi s->nbreVi tesses. " vi t esses . " ; 



Cela va devenir plus difficile de s'y retrouver, et nous allons done utiliser 
un ersatz de surcharge avec une sorte d' interface. 

5.3 Surcharger une methode 

Surcharger une methode ou une propriete consiste, dans la programmation 
objet, a donner le meme nom a deux proprietes ou a deux methodes ou 
plus. Cette commodite est exploitee dans des langages types dans la 
mesure oil ces differentes methodes utilisent des donnees de type different, 
ou un nombre different de parametres, ce qui n'est pas possible en PHP 4 
mais le devient en PHP 5. Pour les proprietes de meme nom, il faut 
qu'elles soient de type different. 

C'est pratique pour reunir dans une meme classe les memes fonctions 
avec des variantes pour des situations differentes sans pour autant creer 
une classe derivee. 

En PHP 4, nous pouvons utiliser une astuce avec la fonction 
f unc_num_args () , qui donne le nombre de parametres envoyes a la 
fonction. Ainsi, imaginons que les fonctions velo() et vel omoteur() 
soient a l'interieur de la classe vehicule. Dans la methode constracteur 
de la classe vehi cul e, on inclut une sorte d'aiguillage conditionne par le 
nombre d'arguments. 

class vehicule { 
function vehicule() { 
if (f unc_num_args ()==2) { 
$name='velo' ; 

$argumentl=func_get_arg(0) ; 
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$argument2=func_get_arg(l) ; 
$this->$name($argumentl, $argument2) ; 

} 

elseif (func_num_args()==3) { 
$name= ' vel omoteur ' ; 
$argumentl=func_get_arg(0) ; 
$argument2=func_get_arg(l) ; 
$argument3=@func_get_arg(2) ; 

$this->$name($argumentl, $argument2, $argument3) ; 

} 
} 

function velomoteur (Ipuissance, $type, $marque) { 

$thi s-> puissance = $puissance; 

$this-> type = $type; 

$this-> marque = $marque; 

$this-> identite="ma moto "; 

} 

function velo ($nbreVi tesses , $type) { 
$this-> nbreVitesses = $nbreVitesses; 
$this-> type = $type; 
$this-> etat = $etat; 
$this-> identite="mon velo "; 
} } 

/* ensuite vous appelez la classe vehicule pour creer un objet 
vehicule avec la methode velo().*/ 
$monvel o=new vehicul e("18" , "VTT"); 

Ce type de procede rend la classe plus simple a utiliser. 

5.4 Le polymorphisme 

Le polymorphisme se definit comme la possibility pour un objet de 
determiner la methode a invoquer selon 1' objet passe comme argument. 
Cette action est geree au vol, en temps reel. 

Dans les exemples precedents, nous avons la classe velo et la classe 
vel omoteur ainsi que la classe parente deux_roues avec pour chacune la 
methode affiche() . Le polymorphisme nous evite de choisir, le 
programme le fait pour nous. 



$objl=new velo(18, "VTT") ; 




$obj2=new velomoteur (750, "trial", 


"Suzuki ") ; 


$deux roues ->aff iche($obj 1) ; 




$deux roues ->aff iche($obj2) ; 
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5.5 Passer un argument par reference 

Avec PHP 4, l'argument passe a une fonction contient par defaut la copie 
de la variable, ce qui pose un probleme si vous modifiez cette variable. 




Reference et valeur 

Quand vous creez une variable, le systeme alloue une case 
memoire pour contenir la valeur de la variable. Quand vous 
passez une valeur a une fonction ou a une methode, le programme 
copie la valeur de cette variable en laissant la variable originale intacte. 
En revanche, quand vous passez une variable par reference, la valeur 
qui est passee a la methode est I'adresse de I'original ; done, les 
modifications a I'interieur de cette methode sont faites sur le contenu de 
la case memoire originale, directement sur la source. 



Pour qu'un argument soit toujours passe par reference a une fonction, 
ajoutez une esperluette devant Fargument dans la fonction : 

function converti r_dol 1 ar_vers_euro (&$prix) { 

$prix=(float)$prix; 

$pn'x*=0.8; 

$pn'x .= '€' ; 

} 

$phrase= 1 Cet article vaut '; 
$prix= ' 15$ ' ; 

converti r_dol 1 ar_vers_euro ($prix) ; 
$phrase.= $prix; 

echo $phrase; // resultat ''Cet article vaut 12€" 

Pour qu'un argument soit passe par defaut a une fonction qui ne le fait pas 
par defaut, ajoutez une esperluette devant l'argument dans l'appel a la 
fonction : 



function convertir dollar vers euro ($prix) { 






$prix=(float)$prix; 






$prix*=0.8; 






$prix .= $prix. '€' ; 






} 

$phrase= 'Cet article vaut '; 






$prix= ' 15$ ' ; 






convertir dollar vers euro ($prix); 






$phrase.= $prix; 
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echo $phrase; // resultat 1 ' Cet article vaut 15$" 

/*il n'a pas ete converti, c'est sa copie interne a la fonction qui a 
ete converti e */ 

converti r_dol 1 ar_vers_euro (&$prix) ; 

echo $phrase; // resultat ''Cet article vaut 12€" 

5.6 PHP 5 et I'objet 

PHP 5 rejoint Java comme langage objet en s'enrichissant des fonction- 
nalites d'un vrai langage objet, le rendant ainsi plus rigoureux, reproduc- 
tible et plus propre. 

Le pointeur 

PHP 5 n'utilise plus la copie de l'argument comme PHP 4 mais se sert 
d'un pointeur (handle) du type de celui utilise pour les fichiers. Pour 
continuer a utiliser les objets comme dans PHP 4, vous disposez de la 
methode induite _clone(). 

Les privileges 

Les privileges d'acces aux methodes et aux proprietes sont de trois types : 

■ private conditionne Faeces a la methode ou a la propriete pour les 
methodes de la classe. 

■ protected conditionne l'acces a la methode ou a la propriete pour les 
methodes de la classe ou des classes heritieres ou derivees. 

■ publ ic ouvre l'acces a la methode ou a la propriete pour toutes les 
classes. 

private $machambre; 

protected function cloturer () 

Le constructeur et le destructeur 

Le constructeur est la methode qui permet a la classe de construire I'objet. 
Dans PHP 4, elle est homonyme a la classe ; dans PHP 5, elle se nommera 
_construct() ou sera homonyme. 
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De la meme maniere, la methode _destruct () permet de detraire I'objet. 

D'autres fonctionnalites enrichissent cette version, qui revolutionne l'ap- 
proche du developpeur PHP. Nous les developpons encore dans les 
quelques chapitres suivants, en particulier dans le chapitre intitule 
Parsez-vous XML ? 
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6 L'internaute est d'abord une personne 



En face de son ecran, l'internaute est une personne. Aussi, le webmestre 
doit toucher l'internaute qui se sentira reconnu par la personnalisation et 
protege par l'authentification. 

La personnalisation et l'authentification entretiennent des liens etroits. Le 
membre du club est identifie par son nom d' usage et son mot de passe, ce 
qui lui donne acces a des donnees. Cette identification permet egalement 
de personnaliser les pages et d'y inclure le surnom de ce membre ou de 
donner un aspect a la page tenant compte de ses gouts. Au fur et a mesure 
que cet internaute se connecte, envoie des e-mails, entre des donnees, 
utilise des applications, il devient une personne pour le webmestre. Cette 
rencontre virtuelle peut prendre de la consistance et deboucher eventuel- 
lement sur une vraie rencontre. II en va de meme entre les membres du 
club. Le Web remplit alors reellement sa fonction. 

Dans votre site, veillez a definir une page Contact pour vous presenter. 
Placez-y eventuellement votre photo. Ainsi vous ne serez pas tout a fait un 
inconnu pour les visiteurs. Vous direz dans cette page pourquoi vous avez 
cree ce site et ce que vous en attendez. 

Au centre des communications et des applications existe un lieu que Ton 
appelle tableau de bord. Cette page permet au membre de voir les 
applications a sa disposition, eventuellement de recevoir des messages 
d'information, de modifier ses donnees, etc. 

Le webmestre dispose lui aussi d'un tableau de bord pour gerer le site, 
ajouter des pages, regarder les statistiques ou analyser l'activite du club. 

6.1 L'authentification 

L'authentification en langage PHP est assez simple. Une fenetre s'ouvre 
lors de Faeces a la page demandant un nom d'usage et un mot de passe. 
L'application verifie ensuite l'existence des donnees dans la base. 

Pour authentifier un visiteur, nous creerons un fichier inclus, grace a la 
commande i ncl ude, dans toutes les pages du club. Vous avez cree votre 
page d'accueil et un certain nombre de pages publiques mais avant 
d'entrer ou d'avoir envie de faire partie du club, l'internaute doit vous 
connaitre un peu pour vous accorder sa confiance. 
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PHP dispose de deux variables de serveur : $_SERVER["PHP_AUTH 
_USER"] qui recupere le nom d'usage entre dans la fenetre (login/ mot de 
passe) et $_SERVER["PHP_AUTH_PW"] qui contient le mot de passe saisi 
par le visiteur. Ces variables sont operationnelles le temps de la visite du 
site, Fauthentification ne sera done demandee qu'une fois. Par contre, 
pour que le visiteur n'ait pas besoin d'entrer son identite a chaque visite 
du site, il vous faudra lui proposer un cookie qui enregistrera ces donnees 
sur son disque dur. 



Un visiteur demande d acceder d la page 


1 


Variable $PHP_AUTH_USER 
n'existe pas 






X 






Fenetre d'authentification 






I 




2 


Variable $PHP_AUTH_USER 
existe 




S 




Correcte 




Incorrecte 


1 








Moins de trois fois Trois fois 


Acces d la page 


1 1 




Fenetre d'authentification Erreur 401 



▲ Figure 6.1 : Authentification 



Pour lancer la fenetre d'authentification, utilisez la fonction header () : 

header( ' WWW-Authenti cate: Basic realm="Club des Bons Vivants 1 "); 
headerf 1 HTTP/1.0 401 Unauthorized'); 
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La premiere ligne lance la fenetre d'authentification et la deuxieme 
aiguille le visiteur qui a clique sur annuler vers la page par defaut du 
serveur Apache pour une erreur 401. Cette derniere indique que l'acces a 
cette page n'est pas autorise. 



$j Inscription - Netscape 



Fichier Edition Affichage Alter Communicator ? 



Precedent Suivani 



a a a. a 

Recharger Accueil Rechercher Guide 



ok 

Imprimer 



<£ m 

Security Arreter 



^"Signets ^ Aller a:|http://127 0.0.1/Clubbonsvivants/bonsvivants/club/inscnption_p1.php <BP' Infos connexes 
jf Internet §] Nouveaut.es §] Sites interessa |f Membres §) Connexions jjf Marche 



Votre prenorn : 
\ r otre adresse email 
Votre code postal 
La ville ou vous vivez 
Votre pays 

Votre nouveau mot de 
passe 

Retapez votre mot de 
passe 

Votre question secrete en 



hean@carfantan. com 



Fontenay-sous-Bois 
France Metrop ^] 



iDocument: charge 



Quel est le nom de jeune fille de votre mere 



▲ Figure 6.2 : Erreur 401 



La fenetre jaillit au moment du chargement de la page. Elle offre trois 
possibilites a l'internaute : 

1 . entrer le bon mot de passe et le bon login ; 

2. entrer un mauvais mot de passe ; 

3. cliquer sur annuler. 

Si nous laissions les lignes en l'etat, le visiteur reviendrait constamment 
sur cette fenetre d'authentification, quels que soient les nom d'usage et 
mot de passe saisis. S'il cliquait sur le bouton annuler, il arriverait sur la 
page d' erreur 401. 

II nous faut done comparer les informations aux donnees de la table 
membres et statuer sur la reponse. Si elle est vraie, l'internaute ne verra 
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plus apparaitre cette fenetre. Si elle est fausse, il verra la fenetre 
reapparaitre encore deux fois. 

Pour les cas 2 et 3, nous renverrons l'internaute vers le formulaire 
d' inscription au club. 

Le processus 

Le programme d'authentification est charge a chaque requete sur 
une page du club. L' interrogation porte sur l'existence des variables 
$PHP_AUTH_USER et $PHP_AUTH_PW. Si ces variables n'ont pas ete initia- 
lisees, c'est que la fenetre d'authentification ne s'est encore jamais 
presentee a l'internaute. Si elles existent, le programme verifie dans la 
base de donnees que les valeurs de ces deux variables sont presentes dans 
la table membres. 

Quand l'internaute tape le nom d' usage et le mot de passe, le programme 
est recharge avec ces deux variables puis entre dans le bloc conditionnel 
adequat. Un bloc s'execute en cas d'existence des variables, l'autre dans 
le cas ou elles n'existent pas. Sur le schema, le visiteur commence son 
cheminement par l'etape 1 s'il n'a jamais ete authentifie, par l'etape 3 s'il 
a deja ete identifie. 



Nom d'utiiisateur et mot de passe requis 



Entrez un nom d'utiiisateur pour zone coadministration a 
127.0.0.1: 



Nom d'utiiisateur: jYannig 
Motde passe: |********** 

OK 



Annuler 



< Figure 6.3 : 

Cheminement de 
I ' authentification 



Dans le schema, nous remplacerons l'erreur 401 par une redirection vers 
la page d' inscription. Ensuite, nous introduirons la variable $fois en 
session, ce qui limitera le nombre de fois ou l'internaute pourra taper son 
mot de passe. La limitation du nombre de tentatives est introduite pour des 
raisons de securite. Cela protege contre les logiciels de type Force 
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Brute qui envoient en rafales un grand nombre de noms d'usage et de 
mots de passe jusqu'a trouver l'acces, comme un serrurier le fait avec des 
passes. 




Les mots de passe 

Combien d'internautes utilisent des mots de passe faciles a 
memoriser et a deviner comme toto ou leur date de naissance ? 
Davantage qu'on ne le pense. lis esperent ainsi les memoriser plus 
vite. 



Si l'internaute prefere ne pas entrer de mot de passe et cliquer sur 
annuler, ce peut etre pour deux raisons : 

■ II ne le connait pas ou l'a oublie. 

■ II n'est pas membre. 



La premiere authentification 



<? 

if (!isset($_SERVER['PHP_AUTH_USER'])) { 

header( ' WWW-Authenti cate: Basic realm="Club des Bons Vivants"'); 

header(' HTTP/1.0 401 Unauthorized 1 ); 

$auth=3; 

include "i nscri ption_pl.php" ; 
exit; 

} 

?> 

La premiere ligne inclut le fichier de connexion a la base de donnees. Les 
deux lignes suivantes envoient l'en-tete HTTP d' authentification. 

Les trois lignes qui suivent seront executees si le visiteur clique sur 
annuler dans la fenetre d' authentification. Elles seront executees aussi en 
cas de trois tentatives infructueuses. 

Nous reprenons la variable $auth que nous avons utilisee dans le chapitre 
precedent pour afficher une annonce dans le formulaire d' inscription. 
Nous lui donnons la valeur 3. Ces differentes valeurs nous permettent de 
differencier les informations a afficher dans ce formulaire. Ainsi nous 



176 • Double Poche PHP & MySQL 



L'authentification 




avions insere ce code dans le fichier inscription jpl.php a la suite des 
expressions pour la valeur 1 et la valeur 2. 



Reportez-vous a la partie Ouvrir une fenetre avec une fonction 
Javascript du chapitre precedent MySQL en action. 



ol La racine du site 

Indiquez a chaque fois I'adresse integrale (ou absolue) de 
votre fichier inclus car la place du fichier appelant peut varier et 
invalider I'adresse relative du fichier appele. Pour cela, il suffit de creer 
un fichier de fonction qui sera appele par toutes les pages, nomme 
fonctions.inc.php, et insere dans le repertoire commun. Dans ce fichier, 
vous inclurez toutes les fonctions et la constante de la racine WWW du 
site que vous nommez RACINEWWW, et la racine du chemin local que 
vous nommez RACINE. Attention, les constantes sont pratiques en 
debut de programme puisque vous changez facilement leur valeur si 
vous demenagez votre site mais elles ne sont pas extrapolees, done 
vous ne pouvez les utiliser a I'interieur de guillemets. 

define ("RACINEWWW", 

" http: //www. happyneurone. com/happy neuron") ; 

define ("RACINE", "home/happy/htdocs/happyneuron") ; 

II vous suffira ensuite de mettre incl ude RACINEWWW. "commun/connexio- 
n.inc.php"; pour inclure le fichier de connexion. Pour avoir le 
chemin local des fichiers, creez une erreur de syntaxe et notez 
le message d'erreur, il indique le chemin local jusqu'au fichier 
en question. Autrement, le plus simple est d'utiliser la variable 
definie $D0CUMENT_R00T. 

define ("RACINE", $ SERVER[" DOCUMENT ROOT"]); 



Maintenant que nous avons etudie le cas ou le visiteur n'a pas encore ete 
sollicite pour inserer son nom d' usage et son mot de passe, voyons celui 
ou les informations sont entrees et ou il faut les verifier. 
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La verification de I'identite de l'internaute 

L'internaute a entre un nom d'usage et un mot de passe, pour cette page 
ou une autre page du site. Le resultat est analyse en regard des donnees de 
la base. La reponse est correcte ou incorrecte. Si elle est correcte, Faeces 
est libre a la page, si elle est incorrecte, nous repetons le processus trois 
fois puis presentons la page d'inscription a l'internaute d'ou il peut 
s'inscrire au club ou disposer d'un lien vers la page oubli.php pour qu'il 
reponde a la question secrete : 

elseif (isset($_SERVER["PHP_AUTH_USER"])) { 

$sql = "SELECT * FROM membres WHERE nom_usage=$_SERVER[' PHP_AUTH_USER'] 
and ttiot_passe=$_SERVER[ ' PHP_AUTH_PW '] " ; 
$resul tat=mysql_query ($sql , $i d_l ink) ; 
$nombre = @mysql_num_rows ($resul tat) ; 
if (!$nombre || $nombre<l) { 

header( ' WWW-Authenticate: Basic realm="Club des Bons Vivants 1 "); 

header (' HTTP/1.0 401 Unauthorized 1 ); 

$auth=3; 

incl ude "http://127 .0.0. 1/BonsVi vants/i nscription_pl.php" ; 
exit; 

} 
} 

Nous allons inserer une variable de session nommee fois. Nous l'initia- 
liserons a 1 dans le fichier fonctions. inc.php. Maintenant, remplacons 
i ncl ude par incl ude_once puisque les valeurs des variables a l'interieur 
de ces fichiers .inc.php sont immuables. Ainsi la variable $f oi S, que nous 
pourrons utiliser d'autres fois, ne sera initialisee qu'une fois. Ensuite, si le 
visiteur entre un mot de passe et qu'il n'est pas correct, la demande 
d'authentification lui est renvoyee et la variable foi S est augmentee de 1. 
A la troisieme mauvaise reponse, le visiteur est aiguille vers la page 
d'inscription au club. 

incl ude_once " . . /commun/f one t ions. inc.php" ; 
incl ude_once RACINE. "/commun/connexi on. inc.php" ; 
session_register("fois") ; 
if (!isset($_SERVER["PHP_AUTH_USER"])) { 

header( 'WWW-Authenticate: Basic realm="Cl lib des Bons 
Vivants" 1 ) ; 

header (' HTTP/1.0 401 Unauthorized'); 

$auth=l; 

include "inscri ption_pl .php" ; 
exit; } 
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elseif (isset($_SERVER["PHP_AUTH_USER"])) { 
$fois++; 

$sql = "SELECT * FROM membres WHERE 
notn_usage=$ SERVER[ 1 PHP AUTH_USER'] 
and mot_passe=$_SERVER [ 1 PHP_AUTH_PW 1 ] " ; 
$resul tat=mysql_query ($sql ,$id_l ink) ; 
$nombre = @mysql_num_rows ($resul tat) ; 
if (!$nombre || $nombre<l) { 
if ($fois==3){ 
$auth=3; 

include "inscription_pl .php" ; 
exit; 

} 

header( 'WWW-Authenticate: Basic realm="Club des Bons 

Vivants" 1 ) ; 
headerf HTTP/1.0 401 Unauthorized'); 
$auth=3; 

incl ude "inscri ption_pl .php" ; 
exit; 

} 

} 

incl ude_once verifie si le fichier a deja ete inclus. Si c'est le cas, elle ne 
le rappellera pas une deuxieme fois. 

Le cookie 

Vous pourriez vous contenter de ce resultat mais nous ajouterons deux 
ameliorations. La premiere est l'utilisation d'un cookie, la seconde, le 
stockage de donnees dans la session. 

Nous verrons un peu plus loin comment creer le cookie. Ici, pour eviter au 
visiteur de passer par la fenetre d'authentification a chaque connexion au 
club, nous recupererons ses donnees sur un petit fichier nomme cookie, 
dans son disque dur. Cela se fera uniquement s'il Fa demande, comme 
nous le verrons plus tard. 

Dans le fichier d'authentification, il suffit d'ajouter un petit bloc qui 
recupere nom d'usage et mot de passe pour court-circuiter la fenetre. Dans 
le cookie, nous inserons les valeurs $al i as et $sauf_condui t qui 
contiennent les valeurs $nom_usage et $mot_passe. Nous n'utilisons pas 
les memes variables pour les differencier. Comme une variable contenue 
dans un cookie est instantanement disponible dans le langage PHP, si la 
variable $al i as est disponible, c'est que l'internaute a accepte un cookie. 
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Listing 6.1 : Authentification : authentification.inc.php 

if(isset($_COOKIE["alias"])){ 
$alias=$_C00KIE["alias"] ; 
$sauf_conduit =$_COOKIE["sauf_condui t"] ; 
$sql = "SELECT * FROM membres WHERE nom_usage='$surnom' 

and motdepasse= '$sauf_condui t ' " ; 
$resul tat=mysql_query ($sql ,$id_l ink) ; 
$nombre = @mysql_num_rows ($resul tat) ; 
if ($nombre==l) { 

$_SERVER["PHP_AUTH_USER"]=$alias; 

$_SERVER["PHP_AUTH_PW"]=$sauf_conduit; 

} 

else { 

setcooki e(sauf_conduit ,$sauf_condui t,time() -30) ; 
setcooki e(al ias,$al ias ,time() -30) ; 

header( ' WWW-Authenti cate: Basic realm="Club des Bons Vivants'"); 
header( 'HTTP/1. 0 401 Unauthorized'); 
$auth=3; 

include "inscription_pl.php"; 



Nous interrogeons les valeurs des variables contenues dans le cookie arm 
de les confronter aux valeurs des colonnes dans la base de donnees. Si les 
valeurs sont exactes, nous les inserons dans les variables $_SERVER 
["PHP_AUTH_USER"] et $_SERVER["PHP_AUTH_PW"] . Ainsi elles seront 
testees a nouveau de maniere transparente pour l'utilisateur et la page sera 
chargee. Si la reponse est inexacte, nous effacons le cookie. Pour effacer 
un cookie, nous en creons un nouveau avec une valeur de temps situee 
dans le passe que nous inserons dans le champ expiration, time donne le 
nombre de secondes du l er janvier 1970 jusqu'au moment present. En y 
retirant 30 secondes, nous donnons une valeur de temps du passe. Ces 
deux nouveaux cookies vont ecraser les anciens et s'effacer a leur tour en 
raison de leur date d' expiration. 

Pour que le membre puisse choisir 1' authentification automatique par 
cookie, nous creerons une page permettant de recevoir un cookie ou 
d'enlever le cookie existant. Nous aurions pu mettre d'office un cookie 
mais il faut savoir que l'internaute ne se connecte pas seulement depuis 
son ordinateur personnel. II peut le faire depuis son lieu de travail ou d'un 
cybercafe. Dans ce cas, il n'est pas souhaitable de stacker un cookie sur 
le disque dur de la machine. D'autre part, l'internaute peut refuser les 
cookies grace aux options de son navigateur. 




exi t; 
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L'usine a biscuits 

Le biscuit (cookie) peut etre fabrique par un fichier qui s'affiche dans une 
petite fenetre. Le lien vers cette page sera insere dans la page d' inscription 
et le tableau de bord du membre. 

Dans le tableau de bord, nous avons deja insere la fonction Javascript 
ouvri r_vasi stas () . II suffit ici de la reutiliser en changeant son nom et 
les parametres. 

Dans le fichier tableaudebord.php, inserez : 

echo 1 <a href="#" onCl i ck="ouvri r_l ucarne 
( ' fabrique_bi scui ts .php?biscui t=oui 1 , 1 vasi stas 1 , 'menubar=no, 
scrol 1 bars=no,statusbar=no, wi dth=300, height =200' ) "> 
Pour inserer un cookie</A>. 1 ; 

Le signe # est un signe d'ancrage dans une page. Si vous souhaitez par 
exemple acceder a un paragraphe a l'interieur de la page, vous ajoutez # 
avec le lien. Vous ne pouvez laisser un lien sans caractere. Pour rester sur 
la meme page, en Javascript, nous utilisons une astuce : cet ancrage qui ne 
va nulle part permet de garder la page ouverte bien que nous cliquions sur 
le lien vers une autre page. Ensuite, vous creez le fichier fabrique _bis- 
cuits.php. 

En haut du fichier avant les en-tetes HTML, creez le cookie : 
<? 

i f (biscui t= 'oui ' ) { 

setcookie(alias,$alias,time()+ (60*60*24*365*20)); 
////II va en prendre pour 20 ans! 

setcookie(sauf_conduit,$sauf_conduit, ti me () +(60*60*24*365*20) ) ; 

} 

session_start () ; 

?> 

Puis, dans le corps de la page, creez un bloc dont l'execution est liee au 
fait qu'il s'agit de la premiere entree de l'internaute dans la page. Le bloc 
est teste avec la non existence de la variable $bi scui t. Dans cette partie, 
vous expliquez l'interet du cookie et les reglages necessaires dans le 
navigateur internet : 
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if (! biscuit){ 

echo "Vous n'aimez pas entrer vos nom d' usage et mot de passe a 
chaque acces au club, pourquoi ne pas utiliser un cookie ? Un 
cookie est un petit fichier qui garde les parametres de votre 
identite sur votre disque dur. 

Comment faire ? <LI> <b>Internet Explorer</b> : allez dans le menu 
outils et cliquez sur option internet. Ensuite vous cliquez sur 
l'onglet V'securiteA" . Dans la fenetre, activez 1 'image du globe 
(internet) et cliquez sur V'personnal i ser le niveau\". Ensuite 
vous cochez les cases dans la categorie \"cookies\" puis sur 
V'autoriser les cookies par session (non stockes)\" et \"autoriser 
les cookies stockes sur votre ordinateur\" . 

<LI> <b>Netscape</b> : dans le menu \"edition\", vous cliquez sur 

\"preferences\" . Ensuite vous selectionnez \"avancees\" et vous 

cochez V'Accepter tous les cookiesV .<p>" ; 

echo " <a href=\"$_SERVER[' PHP_SELF'] ?bi scui t=oui\"> 

Pour enregister le cookie</A>. " ; 

} 

Sinon, l'internaute a deja clique pour enregistrer le cookie : 

Listing 6.2 : Ajouter un cookie : fabrique_biscuits.php 

else { 

echo "Le cookie est cree, desormais vous n'aurez plus besoin de 
vous identifier dans le club des Bons Vivants. Cependant, si vous 
voulez nettoyer de temps en temps votre boite a biscuits, 
il vous suffira de revenir sur cette page. N'oubliez pas de <A 
HREF=\"#\"onCl i ck=\"window.cl ose() \"> fermer la porte</A> 
en partant."; 

} 

?> 



setcookieQ 

Cette fonction permet de creer un cookie 

Syntaxe : setcookie (string nom[, string valeur, int expiration, 
string chemin, string domaine, int securise]) 

Explication la valeur expiration est un timestamp Unix (nombre de 
secondes depuis le 1/1/70), securise est possible (1) pour 
une adresse https:// 
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La conservation des donnees personnelles 

Profitons que le membre du club s'est identifie pour conserver quelques 
variables indispensables au cours de sa visite. Les trois donnees interes- 
santes sont la valeur de la colonne cle, son nom d'usage et son e-mail. La 
cle est une colonne indexee , elle constitue done un bon outil pour 
selectionner, modifier ou supprimer les donnees du membre. Le nom 
d'usage du club permet de personnaliser les pages en s'adressant 
directement a lui. L'adresse e-mail est indispensable pour envoyer un 
courriel de confirmation suite a certaines actions effectuees par cette 
personne. Nous plafons cette extraction de donnees apres la verification 
du nom d'usage et du mot de passe : 

$sql = "SELECT * FROM membres WHERE nom_usage=$_SERVER[' PHP_AUTH_USER'] 
and mot_passe=$_SERVER[ 1 PHP_AUTH_PW '] " ; 
$resul tat=mysql_query ($sql , $ i d_l ink) ; 
$rang=mysql_fetch_array ($resul tat) ; 
$nom_usage=$_SERVER["PHP_AUTH_USER"] ; 
session_register("nom_usage ") ; 
if (!$clef){ 
$clef=$rang['clef '] ; 
session_register("clef") ; 
} 

if (!$email){ 

$emai 1 =$rang [ 1 emai 1 1 ] ; 

session register("email ") ; 



Afin de conserver les donnees, vous pouvez les enregistrer dans la session 
courante. Pour cela, il suffit d'utiliser la fonction session_register(). 
Attention, vous y mettez le nom de la variable a enregistrer et non la 
variable elle-meme. N'oubliez pas les guillemets. 



Session start() 

^m»y Pour recuperer les variables enregistrees dans la session 
courante, il faut ajouter a chaque debut de fichier la fonction 
session_start() . Cette fonction cree une session ou reveille la session 
courante. 



L'enregistrement d'une variable dans une session constitue la facon la 
plus simple et la plus sure de conserver des valeurs en passant d'une page 
a une autre. II en existe d'autres. 
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Les formulaires permettent d'envoyer des donnees sur une autre page. Le 
bouton peut etre une image et le formulaire contenir des champs qui ne 
seront pas affiches, les champs caches (hidden). Ces champs sont 
dissimules mais l'internaute peut les voir en affichant la source de la page. 
Les informations transporters par ce moyen ne doivent pas etre confiden- 
tielles ou strategiques car une personne mal intentionnee peut travestir ces 
champs et envoyer des donnees malveillantes. 

Un lien peut contenir des variables. Ces variables sont placees apres un 
point d' interrogation a la fin de FURL. Elles sont disposees de part et 
d' autre d'un signe egal, a gauche le nom de la variable, a droite sa valeur. 
Les variables sont separees par un signe &. Les donnees dans FURL 
doivent etre codees avec la fonction url encode (). 

Voici un exemple d'URL pour comptabiliser le nombre de liens vers une 
page : 

http://www.bonvivants.com/suivi . php?page=http://www.agirici .org 

Dans le fichier suivi.php, vous ajoutez un compteur que nous verrons 
dans le chapitre suivant et aiguillez l'internaute sur le site cible en tapant 
cette ligne : 

header("Location: $page"); 

Vous pouvez aussi le faire avec un cookie, comme nous venons de le voir. 
Cependant, la session reste le moyen le plus simple et le plus transparent 
pour Futilisateur. 

6.2 Le tableau de bord du membre 

Le tableau est une page index.php dans le repertoire club qui liste les 
actions possibles et les renseignements concernant le membre. Sur cette 
page vont s'afficher des liens pour que le membre puisse modifier son 
profil ou le supprimer. En outre, cette page constitue un carrefour pour 
toutes les applications et communications a Finterieur du club. Dans cette 
etape, nous n'avons pas encore d' applications mais nous allons voir 
comment le membre du club peut modifier ou supprimer son profil. 
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Modifier ou supprimer un profit 

Modifier ou supprimer un profil est simple. Cette operation s'effectue, 
cote programmeur, en utilisant les commandes SQL DELETE et UPDATE, 
respectivement pour la suppression et la mise a jour : 

$sql = "DELETE FROM membres WHERE cl ef= ' $cl ef 111 ; 
mysql_query($sql , $id_link); 
$sql="UPDATE membres SET emai 1 = 1 $emai 1' " ; 
mysql_query($sql , $i d_l ink); 



II s'agit maintenant de mettre ces commandes en ceuvre. Pour une mise a 
jour, nous avons etudie le formulaire d'inscription et, a l'occasion de la 
verification d'un menu a selection multiple, complete le formulaire avec 
les valeurs par defaut des differents champs. II nous suffit ici de creer un 
lien vers ce formulaire en envoyant une variable par le lien. Le 
formulaire s'affichera ainsi avec les valeurs des donnees personnelles du 
membre. Ce dernier pourra alors les modifier. 

Nous effectuerons egalement un ajout dans le traitement du formulaire 
pour introduire la requete SQL UPDATE au lieu de INSERT. II faudra 
prevoir de rassurer le membre en lui confirmant la mise a jour de ses 
donnees par un message de remerciement. 

Vous objecterez peut-etre qu'il manque les champs nom d'usage, mot de 
passe, question secrete et reponse. Le nom d'usage n'est pas modifiable 
mais pour les autres champs, il suffit d'ajouter un bloc conditionnel dans 
le formulaire pour les faire apparaitre en meme temps. A la fin du 
formulaire, nous inserons ou non un lien vers une adresse e-mail pour 
demander le changement de nom d'usage par le webmestre. 




Changement du nom d'usage 

Le changement de nom d'usage n'est pas souhaitable car 
c'est par le nom d'usage que les membres se connaissent entre 
eux. C'est aussi votre maniere de connaTtre ce membre et de suivre 
1'evolution de son profil, comme nous le verrons plus loin dans ce 
chapitre. Vous pouvez accepter de modifier une lettre dans le nom 
d'usage ou de le transformer en un nom approchant. II sera alors 
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necessaire de I'annoncer a tous les membres par un cour- 
riel. Nous ajouterons cette application dans le tableau de 
bord du webmestre. 



Premiere etape 

Cette etape consiste a creer les liens dans le tableau de bord : 

<font size="3">Mon profit </font> 
<ul> 

<1 ixa href="i nscri ption_pl.php?action=modi fier"> 
modifier mon profil</a> 

<lixa href="demission.php">demissioner du Club</a> 
</ul> 

Dans le lien vers le fichier demission.php, introduisons une fonction 
Javascript pour que le membre confirme son desir de demissionner avant 
de le supprimer de la base : 

<lixa href="demission.php" onCl i ck="return corf i rmDem() "> 
demissioner du Club</a> 

La fonction Javascript s'ecrit ainsi : 

Listing 6.3 : le tableau de bord club/index.php 

<script LANGUAGE="JavaScript"> 
<!-- 

function conf i rmDem() 

{ 

var accord=conf i rm("Vous voulez 

vraiment demissionner et perdre votre statut de membre du Club ?"); 
if (accord) 

return true ; 

el se 

return false ; 

} 

// "> 
</script> 

Si le membre clique sur annuler, Taction ne sera pas effectuee. Si le 
bouton OK est clique, le chargement de la page de demission suivra. 
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Deuxieme etape 

Commencons par le plus facile, creer le fichier demission.php. 

Nous allons auparavant copier dans le fichier fonctions.inc.php les 
differentes fonctions que nous avons creees dans les chapitres precedents. 
Ainsi, copiez-y le contenu du fichier majuscules. inc. php. 

Ensuite, dans le fichier demission.php, commencez par inclure les fichiers 
.inc : 

incl ude_once " . . /commun/fonctions. inc. php" ; 
incl ude_once RACINE. "/commun/connexi on. inc. php" ; 

Nous tricherons temporairement en conservant une trace du membre. 
Nous copions son prenom et son adresse e-mail dans une table. Cette 
action nous permettra de lui envoyer un courriel afin de faire, avec tact et 
courtoisie, une petite enquete sur les raisons qui Font pousse a demis- 
sionner. Cette enquete nous aidera a ameliorer le site. Le membre 
demissionnaire sera heureux d'etre reconnu et de pouvoir donner son avis. 
Une fois que vous aurez envoye ce courriel, detruisez les donnees de cet 
internaute. Sur le Web, le respect de la volonte du membre du club est 
essentiel. 

Vous allez creer une table supplemental appelee demission avec les 
colonnes cl ef , prenom, emai 1 et date. Le champ date est une colonne de 
type TIME STAMP (8), elle sera done remplie automatiquement par la date 
courante. Nous avons stocke la variable email dans le fichier d'authen- 
tification : 

$sql = "select prenom from membres where clef= ' $cl ef "' ; 
$resul tat=mysql_query ($sql , $n d_l ink); 
$rang=mysql_fetch_array ($resul tat) ; 
$prenom=$rang['prenom'] ; 

$sql = "del ete from membres where cl ef= ' $cl ef "' ; 
mysql_query($sql , $id_link); 
majuscules($prenom) ; 

echo "$prenom, vous ne faites plus partie du club des Bons 
Vivants mais quelle que soit la raison de votre demission, 
vous y serez toujours le bienvenu. Nous vous remercions 
pour la confiance que vous nous avez temoignee. Nous nous 
permettrons de vous envoyer un email avec une enquete de 
satisfaction auquel vous pourrez repondre pour nous permettre 
de nous ajuster a vos envies et a vos besoins."; 
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Avec ce message, l'ex-membre attendra votre courriel. S'il est mecontent 
des services du club, vous pourrez l'ecouter et tenter de resoudre les 
problemes. Chacun, sur Internet, a besoin de se sentir unique. 

Definissons maintenant le formulaire d' inscription. II est presque adapte 
mais nous devons ajouter des champs a la suite des autres champs, juste 
avant le bouton de soumission du formulaire : 

if ($_GET["action"]=='modifier') { 
$action=$_GET["action"] ; 
echo "<td>Votre nouveau mot de passe</td>"; 
echo "<tdxinput type=\"password\" name=\"mot_passe\" 
val ue=\"$mot_passe\"x/td>" ; 
echo "</tr>"; 
echo "<tr>"; 

echo "<td>Retapez votre mot de passe</td>"; 
echo "<tdxinput type=\"password\" name=\"mot_passebi s\" 
val ue=\"$mot_passe\"x/td>" ; 
echo "</tr>"; 
echo "<tr>"; 

echo "<td>Votre question secrete en cas d ' oubl i</td>" ; 
echo "<tdxinput type=\"text\" name=\"question\" 
val ue=\"$question\" size=\"50\"x/td>" ; 
echo "</tr>"; 
echo "<tr>"; 

echo "<td>Votre reponse</td>" ; 
echo "<tdxinput type=\"text\" name=\"reponse\" 
val ue=\"$reponse\"x/td>" ; 
echo "</tr>"; 
} 

Cela ne suffira pas car il nous faut ajouter la fonction sessi on_start () en 
haut de la page et recuperer les valeurs des champs avec une requete SQL : 



Listing 6.4 : le formulaire pour modifier 

session_start() ; 

if ( ($_GET [" act i on "]==' modifier') { 
$action=$_GET["action"] ; 
$sql="select * from membres where clef= 
$resul tat=mysql_query ($sql , $1 d_l ink); 
$rang=mysql_fetch_array ($resul tat) ; 
$clef=$rang['clef '] ; 
$nom_usage=$rang['nom_usage'] ; 
$mot_passe=$rang['mot_passe'] ; 
$prenom=$rang['prenom'] ; 
$code_postal=$rang['code_postal '] ; 
$ville=$rang['ville'] ; 



$clef 1 
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$pays=$rang[' pays'] ; 
$emai 1 =$rang [ 1 emai 1 ' ] ; 
$questi on=$rang [ 1 quest ion '] ; 
$reponse=$rang[ 1 reponse '] ; 
} 
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▲ Figure 6.4 : Le formulaire renseigne 



Pour finir cette etape, ajoutez le code Javascript de la deuxieme page 
du formulaire sur la premiere page, afin de vous assurer que les champs 
sont bien remplis. Pour cela, il faut creer un bloc conditionnel 
if ($action== 'modi f ier ' ) qui permet d'afficher le Javascript avec 
echo et des guillemets simples, en prenant garde de mettre des barres 
obliques inversees pour echapper les apostrophes dans le code Javascript. 

Troisieme etape 

Nous allons modifier ou creer le fichier de traitement des donnees. 
Modifier la deuxieme page serait fastidieux, il vaut mieux ici creer un 
nouveau fichier. Ce choix oblige a aj outer un aiguillage dans la premiere 
page du formulaire pour que le parametre action dans la balise form 
puisse envoyer les donnees dans ce nouveau fichier que nous appellerons 
traitement_modif_profil.php. Un nom long s'impose ici car il vaut mieux 
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etre explicite, sinon vous vous perdrez dans vos noms de fichiers, dans six 
mois, quand vous aurez oublie tout cela. Imaginez aussi qu'un collegue 
reprenne votre travail. II faut qu'il comprenne les correspondances entre 
les fichiers et les actions. En haut du fichier, inserez : 

session_start() ; 
$clef=$_SESSION['clef '] ; 
$nom_usage=$_POST[ 1 nom_usage '] ; 
$prenom =$_POST['prenom'] ; 
$code_postal=$_POST['code_postal '] ; 
$ville=$_POST['ville'] ; 
$pays=$_P0ST[' pays'] ; 
$email =$_P0ST [ 1 emai 1 '] ; 
$question =$_POST['question'] ; 
$reponse=$_POST[' reponse '] ; 

$sql="UPDATE membres SET nom_usage= ' $nom_usage' , 
mot_passe='$mot_passe' , prenom= ' $prenom' , 
code_postal = ' $code_postal 1 , vil le= ' $vi 1 1 e 1 , pays= ' $pays ' , 
emai 1 = 1 $emai 1 1 , question^ 1 $question ' , reponse= ' $reponse ' 
WHERE clef='$clef '" ; 

$resul tat=mysql_query ($sql , $i d_l ink); 

Verifiez que la mise a jour a ete effectuee en regardant le resultat retourne. 
Si $resultat retourne FALSE, la mise a jour a echoue. Dans ce cas, 
envoyez-vous un message aussi precis que possible et avertissez le 
membre en lui assurant que Ferreur sera bientot reparee. En cas de succes, 
il vous suffit d'afficher dans la page suivante un message informant que la 
mise a jour a ete effectuee. 

6.3 Le tableau de bord d'administration 
du site 

L'application PHPMyAdmin simplifie beaucoup la gestion de votre base 
de donnees, cependant il est recommande d' avoir un tableau de bord 
contenant les principales requetes SQL, les statistiques de vos pages et le 
suivi de votre site. 

II fonctionne sur le meme principe que le tableau de bord du membre. II 
est situe dans un autre repertoire que vous nommerez administration, dont 
Faeces est restreint a vous-meme. Sur un systeme Unix, vous pouvez 
restreindre Faeces a un repertoire par deux fichiers qui travaillent 
ensemble : .htaccess et .htpasswd. Ces fichiers qui component un point 
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avec rien devant sont invisibles pour les navigateurs, le second est 
crypte et situe au-dessus du repertoire www ou htdocs. 

L'acces restreint d'un repertoire avec .htaccess 

Placez le premier fichier que vous nommez .htpasswd au-dessus de votre 
repertoire web appele www ou htdocs, selon la configuration du serveur. 
Dans ce fichier, ecrivez 1 el ogi n : 1 emotdepasse. Attention, le mot de 
passe est crypte. En fin d'ouvrage, nous vous donnons un site qui crypte 
votre mot de passe. 

Si vous souhaitez proteger un deuxieme repertoire, faites la meme chose 
en ajoutant les nouveaux 1 ogi n :motdepasse sur la ligne du dessous... 

Le deuxieme fichier que vous nommez .htaccess est concu ainsi : 

AuthUserFi 1 e /chemi n/compl et/. htpasswd 

AuthGroupFi 1 e /dev/null 

AuthName "zone d'administration" 

AuthType Basic 

<Limit GET P0ST> 

require valid-user 

</Limit> 

En lieu et place de /chemin/complet, mettez le chemin qui conduit a ce 
fichier. Si vous ne le connaissez pas, generez une erreur sur une 
application en langage PHP dans le repertoire web, elle affichera le 
chemin complet. II vous suffit ensuite de le raccourcir de ce qui suit le 
repertoire web. 



Invite \X\ 




Entrez le nom d'utilisateur et le mot de passe pour "Club des Boris Vlvants" a localhost:80 I 
Nom d'utilisateur : 




kemper 




Motde passe : 








□ Utiliser le Gestionnaire de mots de passe pour memoriser ces valeurs. 
| i^ || Annuler | 



▲ Figure 6.5 : .htaccess 



Enregistrez ensuite les fichiers et envoyez-les sur le site en mode texte. 



Double Poche PHP & MySQL • 191 



6 L'internaute est d'abord une personne 



Cette recette restera valable pour proteger le repertoire de PHPMy Admin. 
Quiconque accedera a ce repertoire se verra demander un nom d'usage et 
un mot de passe. 

Assurez-vous que votre hebergeur accepte les fichiers .htaccess et 
.htpasswd car certains ne le proposent pas. Vous remarquerez que si vous 
cryptez plusieurs fois le meme mot, le resultat ne sera jamais le meme. Ne 
vous inquietez pas, c'est une particularite de ce mode de cryptage. 

Le tableau de bord 

Pour l'instant, nous allons creer le tableau de bord en y mettant deux 
applications. Dans les chapitres suivants, nous en ajouterons d'autres. 

Les internautes sont volatiles. Vous vous promenez sur Internet et voyez 
un site qui vous plait. II vous propose une inscription gratuite a un club. 
Qa ne vous engage a rien alors pourquoi ne pas vous inscrire. Le 
lendemain, vous aurez oublie cette inscription. En changeant de fournis- 
seur d'acces, vous oublierez bien sur de modifier votre adresse e-mail 
dans ce club. 

Pour eviter cela, il faut envoyer une lettre mensuelle a vos adherents avec 
en bas du message, un lien pour la desinscription. Cet envoi regulier vous 
permettra de rappeler votre club a leur bon souvenir et de verifier que 
F adresse e-mail est toujours valide. 

Commencons par creer un outil d'envoi en nombre puis un autre pour 
enlever de la table membres les membres aux coordonnees obsoletes. 

L'envoi en nombre 

II s'agit d'une boucle sur le resultat d'une requete avec l'emploi de la 
fonction mai 1 () : 

<? 

i ncl ude_once " . ./commun/connexi on. inc.php" ; 
incl ude_once " . . /commun/f one t ions. inc.php" ; 
if ($message){ 

$sql="select * from membres"; 

$resul tat=mysql_query ($sql ,$id_l ink) ; 
whi 1 e($rang=mysql_f etch_array ($resul tat) ) { 

$nom=$rang[' nom usage 1 ] ; 
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$nom=majuscules($nom) ; 
$motdepasse=$rang[ 'motdepasse '] ; 
$destinataire=$rang[' email '] ; 

$message.="\n\nVotre mot de passe pour le club est $motdepasse. " ; 
$entetes = "From: LE CLUB DES BONS VIVANTS 

<contact@bonsvi vants .com>\n" ; 
mail ("$destinataire","LA LETTRE DES BONS VIVANTS", $message, 

$entetes) ; 

} 
} 

?> 

Le courriel n'est pas formate en HTML, pour que tous les destinataires 
puissent le lire, quel que soit leur equipement. Ensuite, vous creez le 
formulaire pour envoyer le message a ce programme avec un champ 
textarea : 

<? 

if (!$_P0ST ["message"])! 

echo "<form action=\"$_SERVER['PHP_SELF , ]\" method=\"post\">" ; 
echo "<textarea cols=80 rows=80 name=\"message\"x/textarea>" ; 
echo "<input type=\"submit\" val ue=\"Envoyer\">" ; 
echo "</form>"; 

echo "<A HREF=\"#\" onCl ick=\"ouvri r_message() \">Visual i ser 
le message</a>" ; 

} 

el se { 

echo "Le message a ete envoye aux membres du club"; 

} 

?> 

Nous allons creer la fonction Javascript qui ouvre la fenetre de visuali- 
sation du message. Cette fonction a ete creee parce qu'il est difficile de 
reperer les fautes de frappe ou d'orthographe dans un champ de 
formulaire : 

Listing 6.5 : Formulaire pour I'envoi en nombre envoi_nombre.php 

<title>envoi en nombre</title> 
<SCRIPT LANGUAGE="JavaScript"> 
<!-- 

function ouvri r_message() { 

var hauteur=screen. height; 

hauteur*=80/100; 

var largeur=screen. width; 

largeur*=80/100; 

FenetreAf f i cher= window. open ( ' ' , ' 1 ecture' , 'menubar=yes, 
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scrol 1 bars=yes ,statusbar=no, width=' + largeur + ', height=' 

+ hauteur +' , top=0,l eft=0 ' ) ; 
message^ document. forms[0] .message. value; 
message_secret=message; 
message = message. repl ace(/\n/, "<BR>\n") ; 
message +="<P><A HREF=\"Je ferme la fenetreV 

onCl i ck=\"wi ndow.cl ose() \">Je ferme la fenetre</a>\n" ; 
FenetreAf f i cher. document .write (message) ; 
} 

--> 

</script> 



Les variables d'environnement - Netscape 6 



Fichier Edition Afficher Rechercher Ajler a Signets laches Aide 

^j>. -3 ?|| Imprimer 

PrecedQt Rsctaigei • □ ' Rechercher | O [j 

■fi Origine ial Netscape.fr Recherche ,C\ Shop<BNetscape Signets % Net2Phone vTheMoz 



HTTP_ACCEPT=text xmt application xml ; application xhtinl-xnil. text html; q=0.9 ; image png : 

image jpeg. image gif;q=0.2 ; textplain;q=0.8 : text ess, * *;q=0.1 

HTTP_ACCEPT_LANGUAGE=fr-fr 

HTTP_COKNECTION=keep-alhe 

HTTP_HOST=localhost 

HTTP REFERER= 

HTTP j;SER_AGENT=Mozflk 5.0 (Windows; U; Windows NT 5.1; fr-FR; rv:0.9.4) 

Gecko 200 11019 Netscape6/6.2 

REMOTE_ADDR=l 27.0.0. 1 

REMOTE_PORT=1148 

REQUEST_METHOD=GET 

SER\'ER_PROTOCOL=HTTP 1.1 

SER\"ER_SOFTWARE=Apache 1.3.24 (Win32) PHP 4.2.0 

□ 131 <§ Si 1 559 Document : Termine (0.291 s) \=^\s 



k Figure 6.6 : Fenetre de visualisation 



Dans ce code, nous utilisons les proprietes de l'objet screen : height et 
wi dth (hauteur et largeur) a 80 %. La fenetre n'occupera qu'une partie de 
l'ecran, quelle que soit la definition de l'ecran de l'internaute. Un peu plus 
loin, nous ajoutons une balise <BR> aux fins de ligne. Enfin, nous 
affichons un lien pour fermer la fenetre. 
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Le cryptage simple de la cle 

Nous ajouterons un lien dans le courriel pour que les personnes puissent 
se desinscrire simplement du club. Cette demission se fera en deux temps. 
Le lien dans l'e-mail enverra la cle de la table cryptee. La fonction que 
nous vous donnons vaut pour quelqu'un qui n'a pas de module de 
cryptage sur son serveur. C'est une cle facile a decrypter pour qui veut y 
passer un peu de temps mais qui sera suffisante pour un site personnel. II 
est possible egalement d'envoyer la cle avec le mot de passe dans le lien 
du tableau de bord et dans le lien sur l'e-mail. C'est l'occasion ici de vous 
montrer comment crypter une donnee. Le fichier comporte des fonctions 
de cryptage et de decryptage. II sera inclus en haut des fichier qui 
demandent ce type de service. 

Creons maintenant le fichier chiffrer.inc.php qui sera inclus en haut de 
chaque fichier usant du cryptage de chiffres : 

Listing 6.6 : chiffrage : fonctions. inc.php 

global $serrure=85465465454; 
//changez la serrure de temps en temps 
function crypte_chi ffre($secret) { 
$ secret *=$serrure; 
$secret=base64_encode($secret) ; 
$secret=urlencode($secret) ; 
return $secret; 
} 

function decrypte_chiffre($revelation) { 
$revelation =base64_decode($revelation) ; 
$revelation /=$serrure; 
return $revelation; 

} 

Du cote de la creation de la donnee, nous obtiendrons : 
i ncl ude " . . /commun/chi ff rer. inc.php" ; 

Puis avant d'ecrire le lien dans l'e-mail : 
$clef= crypte_chiffre($clef) ; 

Enfin, ajoutez le lien dans l'e-mail : 

echo "Pour se desinscrire du club des Bons Vivants cliquez sur ce 
lien : http://www.bonsvi vants.com/cl ub/demi ssion.php?id=$cl ef "; 
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/*attention de laisser un espace blanc apres le lien pour que 
le logiciel de messagerie puisse identifier ce texte comme un lien 
hypertexte.*/ 

En haut du fichier demission.php, ajoutez du code qui sert a verifier la 
nature de la donnee envoyee : 

if (!$_GET]){ 

header ("Location: http://www.bonsvivants.com/") ; 
exit; 

} 

if ($_GET['id']){ 

$cl ef =decrypte_chi f f res ($_GET[' id '] ) ; 

} 

$sql="select clef from membres where clef='$clef 1 "; 

$resul tat=mysql_query ($sql ,$i d_l ink) ; 

$nombre =mysql_num_rows($resultat) ; 

if (!$nombre || $nombre!=l){ 

header ("Location: http://www.bonsvivants.com/") ; 

exit; 

} 

Vous n'utiliserez peut-etre pas ces fonctions et vous contenterez de mettre 
un lien vers le tableau de bord du club : 

RACINEWWW. "/cl ub/index.php?nom_usage=$nom_usage 
&mot_passe=$mot_passe" ; 



Le nettoyage des adresses e-mail obsoletes 

Une fois votre courriel envoye, vous constaterez que certaines adresses 
e-mail sont obsoletes. La solution serait de les enlever directement de la 
table membres ou de prevoir un delai d'un mois pour qu'un membre 
etourdi puisse modifier son adresse dans le club. Pour cela, nous creons la 
table emails _perimes en entrant cette requete dans la fenetre de Php- 
My Admin afin de lancer les commandes : 

CREATE TABLE emai 1 s_perimes (email VARCHAR(75) not null, date_entree 
TIMESTAMP(8) not null , PRIMARY KEY (email), INDEX (email), UNIQUE 
(email)) 
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Passons au formulaire qui sert a entrer les adresses e-mail perimees dans 
la table : 

<? 

if ($_P0ST[' email ']){ 

$sql = "insert into emai 1 s_perimes (email) VALUES( ' $emai 1 1 ) " ; 

mysql_query ($sql ,$id_l ink) ; 

} 

?> 

<!D0CTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transi ti onal //EN"> 

<html> 

<head> 

<ti tl e>Entree des adresses emails perimees</ti tl e> 
</head> 
<body> 
<? 

echo "<form action=\"$_SERVER['PHP_SELF']\" method=\"post\">" ; 

?> 

email perime :<input type="text" name="emai 1 "> 
<input type="submit" val ue="Entrer"> 
</form> 

Pour fixer un delai, nous proposerons une fenetre dans le tableau de bord du 
membre qui permettra a ce dernier d'entrer sa nouvelle adresse e-mail. Si 
son adresse n'est pas modifiee dans ce delai, le membre sera radie du club. 

Pour epurer les tables membres et emails _perimes, nous utiliserons la 
jointure externe. Nous mettrons ce morceau de code dans le fichier 
votre_email.php, etudie plus loin. II vaut mieux faire ces deux operations 
de changement d'e-mail et d'epuration de la table emails _perimes dans le 
meme temps, sinon il se pourrait que le membre revienne sur la page et 
qu'on lui demande encore sa nouvelle adresse e-mail. 

La jointure externe (LEFT [OUTER] JOIN) permet de comparer la valeur 
des lignes de deux colonnes de deux tables differentes. Si les deux valeurs 
ne sont pas identiques, le resultat retourne la valeur NULL. Ce qui nous 
interesse ici, c'est d'effacer de la table emails _perimes les adresses e-mail 
obsoletes, une fois qu'elles ont pu etre modifiees. Ces adresses e-mail sont 
dans la table emails _pe rimes mais n'apparaissent plus dans la table 
membres, puisqu'elles ont ete modifiees par leur possesseur. Dans une 
jointure externe, ces adresses e-mail seront retournees comme NULL. 

Nous effacons ensuite ces resultats NULL de la table emails _perimes. La 
syntaxe de la jointure externe est LEFT OUTER JOIN nom_table ON. Le 
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mot OUTER n'est pas necessaire. Dans la premiere requete, nous selection- 
nons les donnees et effacons les lignes de la table emails _perimes qui 
retournent NULL. Puis nous selectionnons les adresses qui datent de plus 
d'un mois dans la table emails _perimes et effacons les lignes contenant 
ces adresses dans les deux tables. 

/////ENLEVE LES EMAILS RECTIFIES DE LA LISTE DES EMAILS PERIMES// 
$sql="select email s_perimes.* from emai 1 s_perimes 

LEFT JOIN membres ON emai 1 s_perimes. emai 1 =membres. emai 1 

where membres. clef IS NULL"; 
$resul tat=@mysql_query ($sql ,$id_l ink) ; 
whi 1 e($rang=@mysql_fetch_array ($resul tat)) { 
$emai 1 =$rang [ ' emai 1 ' ] ; 

$sql_efface="del ete from emai 1 s_perimes WHERE emai 1 = 1 $emai 1 '" ; 
@mysql_query ($sql_ef face,$id_l ink) ; 

} 

$hier=date ("Ymd", mktime (0,0,0,date("m")-l,date("d") ,date("Y"))) ; 
//il y a un mois 

$sql ="select email from emai 1 s_perimes WHERE moment<$hier" ; 
$resul tat=@mysql_query ($sql ,$id_l ink) ; 

whi le($rang=@mysql_fetch_array ($resul t)) { 

$email=$rang['email '] ; 

$sql_ef face="del ete from emai 1 s_perimes where emai 1 = 1 $emai 1 ' " ; 
@mysql_query ($sql_efface,$id_l ink); 
$sql_ef face="del ete from membres where emai 1 = ' $emai 1 '" ; 
@mysql_query ($sql_efface,$id_l ink); 

} 

6.4 Des amenagements 
dans ('application 

Recapitulons les modifications sur l'application au vu des dernieres 
applications creees. 

Vous allez creer un fichier nomme authentification.inc.php que vous 
inclurez dans tous les fichiers demandant une authentification. 

Dans le tableau de bord des membres, nous ajouterons une requete qui 
verifiera si l'adresse e-mail est contenu dans la table emails _perimes. 
Dans ce cas, une fenetre s'ouvrira pour proposer au membre du club de 
saisir la nouvelle. 
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Le fichier authentification.inc.php fournit les valeurs de membres . cl ef , 
emai 1 et nom_usage : 

$sql = "select * from emai 1 s_perimes where emai 1 = ' $emai 1 1 " ; 

$resul tat=@mysql_query ($sql ,$id_l ink) ; 

$nbre_rangs=mysql_num_rows ($resul tat) ; 

if ($nbre_rangs==l) { 

$fenetre=l; 

} 

Dans l'en-tete, ajoutez un script en langage Javascript : 
if ($fenetre){ 

echo "function ouvri r_vasi stas (adresse,nom_fenetre,caracteri stiques) 
{\n"; 

echo " window. open (ad resse, nom_fenetre,caracteri stiques) ;\n" ; 
echo ' } ' ; 

} 

Affichez enfin la balise <B0DY> : 

<? 

if ($fenetre){ 

echo "<body on Load=\" ouvri r_vasi stas ( ' votre_emai 1 . php ' , ' vasi stas 1 , 
'menubar=no,scrol 1 bars=no,statusbar=no,width=300,height=200' )\">\n" ; 
} 

else { 

echo "<body>"; 
} 

?> 

Nous utilisons l'evenement on Load qui se declenche au chargement de la 
page dans le navigateur. Le script Javascript est cree par la commande 
echo, liee a la condition de l'existence de l'e-mail dans la table 
emails _perimes. 

Le fichier votre_email.php est simple : 

Listing 6.7 : modification de I'email votre_email.php 

<? 

session_start() ; 
$clef=$_SESSION['clef '] ; 
if ($_POST["nouvel_email"]){ 
$nouvel_emai 1 =$_POST["nouvel_emai 1 "] ; 

$sql="update membres set emai 1 = 1 $nouvel_emai 1 1 where clef='$clef '"; 
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mysql_query ($sql ,$id_link) ; 

} 

?> 

<!D0CTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transi tional //EN"> 

<html> 

<head> 

<title>Votre nouvel email </title> 
</head> 
<body> 
<? 

if (!$nouvel_emai 1 ) { 

echo "Bonjour, l'adresse email, $email, que vous nous avez fournie 
n'est plus valide. Voulez-vous entrer votre nouvelle adresse ?"; 
echo "<form action=\"$_SERVER[' PHP_SELF'] \" method=\"post\">" ; 
echo 'Votre email  : <input type="text" 
name="nouvel_emai 1 ">' ; 

echo '<input type="submi t" value="Envoyez">' ; 
echo '</form>'; 

} 

else { 

echo "Merci de votre contribution votre adresse email a ete changee 
en $nouvel_emai 1 " ; 

] 

?> 

</body> 
</html> 



IS? Votre nouvel email - Netsca... 



Bonjour. l'adresse email, jean ^2 irnarre.com. 
que vous nous avez fourni n'est phis valide. 
Voulez-vous entrer votre nouvel email ? 
Votre email : | 
Envoyez | 




-« Figure 6.7 : 

Votre e-mail est 
perime 



L'affichage de ce fichier est F emanation d'un code Javascript, il n'est 
done pas possible de rappeler d'autres en-tetes avec les commandes 
include_once habituelles sans que le moteur PHP ne proteste. 
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6.5 En-tetes HTTP et variables globales 

Elles comprennent les requetes HTTP, les variables fournies par le serveur 
et nourries automatiquement par le navigateur de Tinternaute et les 
tableaux crees par le moteur PHP pour conserver les requetes CGI pour les 
formulaires (POST, GET...). II est indispensable de les connaitre car elles 
participent constamment a l'interactivite de vos programmes. 

En-tetes HTTP 



Voici les fonctions qui vous permettent d'interagir avec les en-tetes 
HTTP, en y lisant, en y ecrivant des valeurs ou en les effacant. 



Tab. 6.1 : Les fonctions pour les en-tetes HTTP 


Fonction 


Description 


1111" cptrnnlf i p ( ctn'nn n nm \ 

1 1 1 L JCLLUUK 1 C ^ J LI 1 1 1 y II UNI |_ , 

string valeur [, int expire [, 
string chemin [, string domaine 
[, int secure]]]]]) 


Fnvnip 1 1 n rnnkip Qiir la marhinp rlipnt 

LIIVUIC Ull OUUr\IG oUI Id llluOIIIIIG UIICIIL. 


bool session destroy ( void) 


Efface les donnees enregistrees dans la 
session. 


string session id ( [string id]) 


Retourne le nom (i d) de la session 
courante et, si un id est ajoute en 
parametre, change I'id courant par celui- 
ci. 


bool session is registered ( 
string nom) 


Vrai si une variable est enregistree dans 
une session 


string session name ( [string 
nom] ) 


Retourne ou change le nom de la session 
courante. 


bool session register ( mixed nom 
[, mixed . . .] ) 


Enregistre une ou plusieurs variables dans 
la session courante. 


bool session unregister ( string 
nom) 


Efface une variable de la session courante. 


string session save path ( 
[string chemin]) 


Retourne ou change le chemin de la 
session courante. 



Double Poche PHP & MySQL • 201 



6 L'internaute est d'abord une personne 



Tab. 6.1 : Les fonctions pour les en-tet.es HTTP 


Fonction 


Description 


bool session start ( void) 


Cree une session si aucune session n'est 
active ou reprend la session existante en 
initialisant les variables. 


int header ( string chaine [, 
bool remplace]) 


Envoie un en-tete HTTP. Si remplace est 
sur FALSE, votre en-tete ne remplacera 
pas un en-tete de meme type. 


array getal 1 headers ( void) 


Retourne un tableau de tous les en-tetes 
HTTP passes a la page. 



Ces fonctions doivent imperativement etre placees au debut de votre 
script, avant la balise <HTML>. 

Quelques utilisations de la fonction headerO 

Vous pouvez rediriger un navigateur sur une autre page avec le parametre 
location qui est un equivalent de la balise HTML refresh : 

header("Location: http://www.ebizous.com/") ; 



URL absolue 

L'URL de redirection doit etre absolue. Si votre URL est un 
chemin relatif, la redirection n'aura pas lieu. 




Plusieurs noms de domaine sur le meme site 

aagjr Certains hebergeurs vous permettent gratuitement de pointer 
plusieurs noms de domaine sur le meme site. II vous suffit alors 
de mettre quelques lignes sur votre page d'accueil pour rediriger le 
visiteur sur la page choisie selon I'URL demandee, cela d'une maniere 
transparente. 

if (eregi($_SERVER["HTTP_HOST"] , "votreautresi te.com") ){ 
echo '<meta http-equi v="ref resh" 

content="0;URL=http://mons ite.com/repertoi re/">' ; 
exit; 
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II est conseille de mettre le deuxieme site, si c'est un site 
as*J/ different, dans un repertoire qui lui est propre, et de creer des 
fichiers de redirection dans le repertoire principal pour toutes les 
pages du deuxieme site afin d'eviter de taper a chaque fois le nom du 
repertoire. N'oubliez pas la fonction exi t, sinon vous afficherez les deux 
pages. Vous ne pouvez ici utiliser la fonction header () car aucune ligne 
ne doit la preceder. 



Les fournisseurs d'acces utilisent les proxys. Ces machines stockent les 
pages les plus frequemment vues par leurs internautes. Ce procede evite 
de payer de la bande passante mais se revele genant pour le webmestre 
d'un site, car la page sera mise a jour seulement de temps en temps. 
D' autre part, le navigateur, si certaines options sont laissees par defaut, 
peut enregistrer les pages sur le disque dur. Pour peu que vous affichiez la 
date et/ou de l'heure, ou mettiez frequemment a jour votre site, l'inter- 
naute pensera que votre site fonctionne mal ou n'est pas mis a jour. Voici 
des lignes de programmes qui, envoyes dans la fonction header (), 
obligeront le proxy a recharger la page a chaque visite. 

header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT") ; 

Ici la page envoie une information indiquant qu'elle est constamment 
modifiee. 

header ("Pragma: no-cache"); 

ici elle empeche l'ordinateur de mettre la page dans son cache ou le proxy 
de la stocker. 

Si votre site est multilingue, vous pouvez afficher des liens sur des 
drapeaux a la page d'accueil, mais pour le confort des visiteurs, vous 
pouvez aussi rediriger l'internaute vers la page adequate selon la langue 
choisie dans le navigateur. Ainsi ils court-circuitent la page d'accueil qui 
affiche un lien par langue et n'a, en general, pas d'interet. 

i f (eregi ($_SERVER["HTTP_ACCEPT_LANGUAGE"] , "fr" ) ) { 

echo '<meta http-equi v="ref resh" 

contents "0;URL=http:/ /www.bonsvi vants.com/fr/"> 1 ; 

exit; 

} 
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Ajoutez ensuite des blocs elseif pour les langues que vous proposez, 
jusqu'a un else qui oriente le visiteur vers la page d'accueil, si son 
navigateur n'a ete regie pour aucune des langues que vous proposez. 

Variables PHP 



Le moteur PHP dispose de variables globales qui completent les variables 
Apache (ou variables d'environnement) que nous avons vues dans le 
chapitre 4. 



Tab. 6.2 : Les variables PHP 


Variable 


Description 


$PHP_SELF 


Equivalent a SCRIPT_NAME 


$HTTP_COOKIE_VARS 


Tableau des variables regues d'un cookie 


$HTTP_GET_VARS 


Tableau des variables regues d'un formulaire par la 
methode GET 


$HTTP_POST_VARS 


Tableau des variables regues d'un formulaire par la 
methode POST 


$HTTP_POST_FILES 


Tableau des variables regues d'un formulaire de 
telechargement de fichiers 


$HTTP_ENV_VARS 


Tableau des variables d'environnement 


$HTTP_SERVER_VARS 


Tableau des variables regues d'un cookie 


$HTTP_SESSION_VARS 


Tableau des variables regues d'une session 


Voici les nouvelles variables fournies avec la version 4 de PHP : 


Tab. 6.3 : Les variables PHP (PHP4) 






$_C00KIE 


Tableau des variables globales regues d'un cookie 


$_GET 


Tableau des variables globales regues d'un formulaire par 
la methode get 


$_P0ST 


Tableau des variables globales regues d'un formulaire par 
la methode post 
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Tab. 6.3 : Les variables PHP (PHP4) 


vanaDie 


usscnpiion 


r i Lr_o 


Tahlo^n Hoc uari^ihlpc nlnh^loc topiipc rl'iin fnrmiilairp Hp 

IdUlGdU Ucb vdl IdUlGb yiUUdlCb IcUUCb U UN lUMIIUIdllC UC 

telechargement de fichiers 


$ ENV 


Tahlpan Hpc variahlpc: nlnhalpc H'pn\/irnnnpmpnt 


$_SERVER 


Tableau des variables globales regues d'un cookie 


$_SESSI0N 


Tableau des variables globales regues d'une session 


$_REQUEST 


Tableau ne de la fusion des tableaux $ GET, $ POST et 
$_C00KIE 



Ces variables servent de raccourcis de code, de marqueurs ou de variables 
generiques pour tout type d'environnement. 

II est plus simple de taper $_SERVER[" PHP_SELF"] dans Faction d'un 
formulaire pour que l'application se rappelle elle-meme plutot qu'elle 
n'appelle le chemin relatif ou absolu au fichier. Vous pouvez deplacer 
votre fichier dans un autre repertoire ou le placer sur un autre serveur sans 
le changer. 

Nous avons vu aussi que vous pouvez tester la presence du tableau $_GET 
pour savoir si un lien a ete clique avec les donnees qui s'y rattachent. Avec 
$_P0ST, nous avons cree une application qui traite les donnees de toutes 
sortes de formulaires. 

Voyez le traitement generique d'un formulaire quelconque dans 
le chapitre Les clefs du PHP. 



Variable d'environnement 

Les variables d'environnement sont les variables du serveur, en l'occur- 
rence Apache. Le navigateur du visiteur ne fournit pas forcement toutes 
celles qui lui sont imparties. Ainsi, essayez en stockant la variable 

$_SERVER["HTTP REFERER"] de vos visiteurs. C'est une variable inte- 

ressante car elle donne FURL de la page qui a appele la page courante. 
Ainsi, vous verrez les sites qui ont place des liens vers votre site, done 
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ceux qui attirent le plus de monde chez vous. Vous remarquerez aussi que 
parfois, la page ne contient aucune valeur. Avec la version 4, $HTTP_AC- 
CEPT est remplace par $_SERVER comme $_SERVER["HTTP_ACCEPT"] . 



Tab. 6.4 : Les variables d'environnement. 


Variable 


Description 


$HTTP_ACCEPT 


Liste des formats acceptes par le navigateur web 


$HTTP_ACCEPT_LANGUAGE 


Langage accepte par le navigateur 


$HTTP_CONNECTION 


Numero d'lP et numero de port eventuel 


$HTTP_H0ST 


Numero d'lP et numero de port eventuel 


•Khttp rfffrfr 


Panp H'nrininp Hp la rpmiptp 


$HTTP_USER_AGENT 


Version du navigateur 


$REMOTE_ADDR 


Adresse IP de l'internaute 


$REM0TE_P0RT 


Port client 


$REQUEST_METHOD 


Methode GET ou POST 


$SERVER_PR0T0C0L 


Norn du protocole utilise par le serveur (HTTP/1.0) 


$SERVER_SOFTWARE 


Norn du serveur HTTP (Apache/1.3.20 (Win32) 
PHP/4.0.6 ) 



401 Authorization Required - Netscape 




Rd« Edition AITtluyi: Aki Cummuniuilo. ? 


* a ha 

M PiacAdnnf Httchitigm Accumt Hochmchui 




"| «*"Sian«u A AiisiillinRniBIHSHHBBBIHIIH 


■v fl^" Infos connexes 1 


' Imer^ei ^ Nouveajles 4 Sims inleressa 4 Mambtas 


^ Connexions '-. r/arEhil 



Authorization Required 

This server could not verity' dial you are authorized to access the 
document requested. Either you supplied the wromt credentials (c.ji., 
bad password), or your browser doesn't understand how to supply 
the credentials required. 



Apache/ 1. AM .Venw at locjilhmt I'art SO 



< Figure 6.8 : 

Les variables 
d'environnement 
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6.6 Recapitulation 

Creons un fichier variables, inc. php dans lequel nous stockons les cons- 
tantes et les variables predefinies comme celles concernant le jour 
courant... Au debut de vos fichiers, vous obtiendrez une liste de 
commande include que vous modulerez avec les deux barres obliques 
caracterisant les commentaires. Ainsi vous neutraliserez la ligne concer- 
nant l'authentification pour les fichiers hors du club. Dans votre repertoire 
administration, vous n'aurez pas besoin d'authentification ni de statisti- 
ques. Au debut de vos fichiers, vous obtiendrez a peu pres : 

incl ude " . . /commun/vari abl es. inc. php" ; 

incl ude RACINE. "/commun/f one t ions. inc. php" ; 

incl ude RACINE. "/commun/connexi on. inc. php" ; 

//incl ude RACINE. "/commun/authenti fi cation. inc. php" ; 

//incl ude RACINE. "/commun/s tats. inc. php" ; 

II sera sans doute mieux pour vous d' avoir une liste imprimee des 
fonctions contenues dans le fichier fonctions. inc. php avec leurs fonction- 
nalites et parametres. Imprimez egalement la liste des variables et des 
constantes contenues dans le fichier variables. inc. php, ainsi que la liste 
des variables extraites par l'authentification dans la table membres. 
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7 Des algorithmes, des outils et des fonctions 

Lorsque vous connaissez les fonctions principales et savez les articuler 
dans un programme, vous pouvez resoudre n'importe quel probleme, a 
condition de bien le poser au depart. Avant de creer une application, que 
ce soit par passion ou dans le cadre de votre travail, pensez-y plusieurs 
jours durant, compulsez des documents sur Internet, validez les differentes 
methodes et choisissez enfin celle qui apporte un juste equilibre entre la 
difficulte et la simplicity. Une application trop simple peut se reveler 
fastidieuse, mais une application trop complexe demande parfois beau- 
coup d'energie pour un detail qui se revele finalement inutile. Si d'autres 
personnes ont deja resolu votre probleme, totalement ou partiellement, 
proposez-leur des ameliorations. Si le programme n'existe pas mais qu'il 
vous depasse par son ampleur, elaborez-le en partie. Puis redigez une 
documentation en detaillant vos objectifs et les etapes a venir. Une fois le 
programme finalise, proposez-le sur votre site personnel ou sur un site 
touchant la communaute du Libre. 

Dans le chapitre Mettre de I'ordre, nous vous donnons des 
cles pour simplifier votre application et creer un fichier de 
configuration qui regroupe toutes les variantes de I'application. 

Nous vous proposerons quelques outils pour ajouter a votre site. Mais, 
avant cela, nous nous pencherons sur les tableaux car la plupart des 
applications les utilisent, y compris dans leurs fonctions de tri. 

7.1 Tableaux 



Quand vous avez plusieurs resultats de SQL et avez besoin de les 
ordonner, les tableaux deviennent indispensables. 



Tab. 7.1 : Les fonctions de manipulation d'elements de tableau 


Fonction 


Description 


array array (...) 


Cree un tableau a partir d'une liste de valeurs. 


array array keys (array 
tabl eaul) 


Cree un tableau avec les cles de I'autre tableau. 


array array merge (array 
tableaul, tableau2...) 


Fusionne deux tableaux ou plus. Pour deux cles 
identiques, il gardera seulement la derniere 
valeur. 
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Tab. 7.1 : Les fonctions de manipulation d'elements de tableau 


Fonction 


Description 


array array merge recursive 
(array tableaul, tableau2...) 


Fusionne deux tableaux. En cas de cles 
identiques, insere un tableau au lieu d'une 
variable scalaire. 


array array pop (array 
tabl eaul) 


Retourne la derniere valeur, qu'il supprime du 
tableau. 


array array push (array 
tableaul, mixed var,...) 


Ajoute un ou plusieurs elements a la fin du 
tableau. 


array array shift (array 
tabl eaul) 


Extrait la premiere valeur, qu'il supprime du 
tableau. 


array array slice (array 
tableaul, int debut, int 
[1 ongueur] ) 


Supprime une partie des elements du tableau. 


array array splice (array 
tableau, int debut, int 
[longueur], array tableau2) 


Supprime une partie des elements du tableau ou 
les remplace par les elements du deuxieme 
tableau. 


array array unshift (array 
tableaul, mixed var,...) 


Ajoute un ou plusieurs elements au debut du 
tableau. 


array array di f f ( array 
tableaul, array tableau2 [, 
array ...]) 


Cree un tableau avec les elements du tableaul 
qui ne sont pas dans le tableau2, etc. 


array array intersect ( 
array tableaul, array 
tableau2 [, array ...]) 


Cree un tableau avec les elements communs de 
tous les tableaux. 


array array values (array 
tabl eaul) 


Cree un tableau avec les cles de I'autre tableau. 


int array wal k ( array 
tableaul, string fonct [, 
mixed parametre]) 


Applique a chaque element du tableau une 
fonction pour laquelle il est possible d'envoyer 
un troisieme parametre. 


array range (int bas, int 
haut) 


Cree un tableau forme d'un intervalle de valeurs. 


array compact(stri ng var [, 
array, tableau...]) 


Cree un tableau associatif forme des noms et 
valeurs de variables (eventuellement contenues 
dans un tableau). 
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Tab. 7.1 : Les fonctions de manipulation d'elements de tableau 


Fonction 


Description 


int extract ( array tableau 
[, int type extract [, 
string prefixe]]) 


Cree une variable avec la paire cle/valeur de 
chaque element du tableau, les deuxieme et 
troisieme parametres sont des options. 


int sizeof (array tableau) 
int count (array tableau) 


Retourne le nombre d'elements du tableau, 1 
pour une variable scalaire. 


array each (array tableau) 


Retourne la prochaine paire cle/valeur du 
tableau. 


void list (... . ) 


Affecte respectivement des valeurs a une liste de 
variables. 


boolean in array (mixed 
aiguille, array bottedefoin) 


Retourne vrai si le tableau contient la valeur. 


mixed key (array tableau) 


Retourne la cle de I'element courant. 



Types d'extraction 

La fonction extract () , qui cree des variables a partir d'un tableau, utilise 
des options dans le cas oil deux elements identiques du tableau des 
symboles provoquent une collision de variables. Le prefixe est suivi d'un 
blanc souligne (_). Le tableau des symboles, cree automatiquement par 
PHP, est le tableau qui contient toutes les variables. 



Tab. 7.2 : Les options d'extraction d'elements de tableau 






EXTR_OVERWRITE 


Par defaut. En cas de collision, ecrase la variable 
precedente. 


EXTR_SKIP 


En cas de collision, epargne la variable precedente. 


EXTR_PREFIX_SAME 


En cas de collision, prefixe le nom de la variable avec le 
troisieme parametre, conservant ainsi I'ancienne variable. 


EXTR_PREFIX_ALL 


Prefixe toutes les variables. Depuis PHP 4.0.5, cela inclut 
les noms numeriques de variables, qui autrement seraient 
invalides. 


EXTR_PREFIX_INVALID 


Seuls les noms invalides ou numeriques de variables sont 
prefixes. Ce drapeau a ete ajoute a la version 4.0.5. 
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Tab. 7.2 : Les options d'extraction d'elements de tableau 






EXTR_IF_EXISTS 


En cas de collision, ecrase seulement la variable 
precedents, sinon ne fait rien. Ce drapeau a ete ajoute a la 
version 4.2.0. 


EXTR_PREFIX_IF_EXISTS 


En cas de collision, ajoute un prefixe seulement si la 
variable non prefixee existe. Ce drapeau a ete ajoute a la 
version 4.2.0. 



Imaginez que vous parcouriez les pages d'un livre avec le doigt, ce doigt 
serait le pointeur. PHP se sert d'un pointeur pour parcourir un tableau. Au 
moment ou un element de tableau s'affiche, le pointeur le designe. 

Les fonctions suivantes manient le pointeur dans un tableau. 



Le pointeur 



Tab. 7.3 : Les fonctions de localisation du pointeur 


Fonction 


Description 


Mixed end (array tableau) 


Place le pointeur interne sur le dernier element 
du tableau. 


Mixed next (array tableau) 


Place le pointeur interne sur I'element suivant. 


Mixed pos (array tableau) 


Retourne la position courante du pointeur. 


Mixed prev (array tableau) 


Place le pointeur avant la position courante. 


Mixed reset (array tableau) 


Place le pointeur au debut du tableau. 



Letri 

Les fonctions de tri ne retournent pas de valeur. 
Voici les fonctions de tri simple. 
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Tab. 7.4 : Les fonctions de tri simple 


rOMC/TIOn 


Ucbonpuuri 


Void sort (array tableau) 


Trie le tableau. 


Void rsort (array tableau) 


Trie le tableau dans I'ordre inverse. 


Void uksort (array tableau, 
function fonction) 


Trie le tableau par cles en utilisant une fonction. 


Void usort (array tableau, 
function fonction) 


Trie le tableau par valeurs en utilisant une 
fonction. 



Void shuffle (array tableau) Melange aleatoirement les elements du tableau. 



Voici les fonctions de tri associatif, c'est-a-dire celles qui conservent 
F association d'origine entre les index et les valeurs. 



Tab. 7.5 : Les fonctions de tri associatif 


Fonction 


Description 


Void asort (array tableau) 


Trie les elements dans I'ordre alphabetique 
inverse. 


Void arsort (array tableau) 


Trie les elements dans I'ordre alphabetique. 


Void ksort (array tableau) 


Trie le tableau dans I'ordre de ses cles. 


Void krsort (array tableau) 


Trie le tableau dans I'ordre inverse de ses cles. 


Void uasort (array tableau, 
function fonction) 


Trie le tableau en utilisant une fonction. 



Void sort (array tableau) Trie le tableau dans I'ordre de ses valeurs. 



Les tableaux servent a classer des donnees et a les manipuler. Vous pouvez 
le trier ou le modifier en enlevant, en ajoutant ou en intervertissant des 
valeurs, fusionner plusieurs tableaux et en decliner chaque valeur dans 
une boucle foreach. Le tableau est l'outil favori de "l'analyste-jongleur" 
de donnees. 

Declinons un exemple de tri simple puis le meme, de type associatif : 
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Listing 7.1 : Tri simple par ordre alphabetique, tri associatif par clef : 
vins.php 

$vins = array ("Bourgogne" , "Beaujol ai s" , "Bordeaux", 

"C6tes-du-Rh6ne" , "Alsace", "Anjou"); 
sort ($vins); 

foreach($vins as $clef=>$val eur) { 
echo "$clef = $valeur <BR>\n"; 
} 

echo "<P>"; 

$vins = array ("d"=>"Bourgogne" , "a"=>"Beaujolais", "b"=>"Bordeaux" , 
"c"=>"C6tes-du-Rhone" , "f"=> "Alsace", "e"=>"Anjou") ; 
ksort ($vins); 

foreach($vins as $clef=>$val eur) { 
echo "$clef = $valeur <BR>\n "; 
} 

Ces deux exemples vous montrent la difference entre un tri simple et un 
tri associatif. 
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0 = Alsace 


a = Beaujolais 




1 = Anjou 


b = Bordeaux 




2 = Beaujolais 


c = C6tes-du-Rh6ne 




3 = Bordeaux 


d = Bourgogne 




4 = Bourgogne 


e = Anjou 




5 = Cotes -du-Rhone 


f= Alsace 
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< Figure 7.1 : 

Tris divers 



Comme vous le voyez ci-dessous, le tri simple attribue de nouvelles cles 
en fonction de la place de l'element dans le tri, tandis que le tri associatif 
conserve les cles, se contentant d'afficher le nouvel ordre des elements. 

Resolvons maintenant le probleme du tri alphabetique fran5ais. Si nous 
utilisons les fonctions de PHP, les mots commencant par une lettre 
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accentuee seront relegues apres les mots en z. Pour remedier a ce 
probleme, utilisons la fonction usort () , qui permet de faire un tri par une 
fonction : 



function cmp ($a, $b) { 




$un tabl eau=array ( 'a', 'a', 'a'); 
$i=0; 




$lalettre='b' ; 




foreach($un tableau as $valeur){ 




$a=str repl ace($val eur,$l al ettre.$i 


,$a); 


$b=str repl ace ($val eur,$l al ettre.$i 
$i++; 

} 


,$b); 


Voici le vrai corps de la fonction. Les lignes qui suivent ne font que 


repeter le meme schema pour chaque lettre accentuee, a savoir que chaque 


lettre accentuee est placee apres sa lettre generique et avant la lettre 


suivante en inserant un chiffre : 




Listing 7.2 : Tri avec les lettres accentuees 


: tri_franc.php 


$un tabl eau=array ( 1 e'.'e'.'e'.'e 1 ); 




$1 al ettre= 1 f 1 ; 




$i=0; 

foreach($un tableau as $valeur){ 




$a=str repl ace ($val eur,$l al ettre.$i 


,$a); 


$b=str repl ace($val eur,$l al ettre.$i 
$i++; 


,$b); 


} 

$un tabl eau==array ( ' 5 1 , ' b ' ) ; 




$1 al ettre= 1 p 1 ; 




$i=0; 

foreach($un tableau as $valeur){ 




$a=str repl ace ($val eur,$l al ettre. $i 


,$a); 


$b=str repl ace ($val eur,$l al ettre. $i 
$i++; 


,$b); 


} 

$un tabl eau=array ( 1 T 1 , ' i' ' ) ; 
$i=0; 




$lalettre=' j 1 ; 




foreach($un tableau as $valeur){ 




$a=str repl ace($val eur,$l al ettre. $i 


,$a); 


$b=str repl ace ($val eur,$l al ettre. $i 
$i++; 


,$b); 


} 

$un tabl eau=array ( 1 g ' ) ; 
$i=0; 




$lalettre='d' ; 
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foreach($un tableau as $valeur){ 




$a=str replace($valeur,$lalettre.! 


i ,$a) ; 


$b=str repl ace($val eur,$l al ettre.! 
$i++; 


i,$b); 


} 

$un tabl eau=array ( 1 u 1 , ' u 1 ) ; 
$i=0; 




$1 al ettre= ' v 1 ; 




foreach($un tableau as $valeur){ 




$a=str repl ace ($val eur, $1 al ettre. ! 


i,$a); 


$b=str repl ace ($val eur,$l al ettre.! 
$i++; 


i,$b); 


} 

if ($a == $b) return 0; 




return ($a < $b) ? -1 : 1; 

} 





Cette fonction s'applique a chaque element du tableau. Ici, nous utilisons 
une astuce qui consiste a remplacer la lettre accentuee par la lettre 
alphabetique suivante et un chiffre. Un chiffre sera toujours trie avant une 
lettre. Ce nouveau mot donnera la cle du vrai mot dans le tri du tableau. 
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A. Figure 7.2 : Trifrangais 

Pour appeler cette fonction, il vous reste a ecrire la ligne suivante 
usort ($tableau, "cmp"); 
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7.2 Calendriers, dates et autres agendas 

Les fonctions de date sont des outils pour nettoyer la base, trier des 
donnees, connaitre l'actualite d'une donnee et amenager des delais avant 
une action... Leurs fonctionnalites sont innombrables. 

Duree apres une date ou avant une date 

Nous avons deja vu comment afficher une date. Vous pouvez avoir envie 
de faire un concours ou un sondage avec un lot a gagner, fourni par un 
sponsor en echange de publicite, comme nous le verrons plus loin. Pour 
inciter les visiteurs a y participer, vous afficherez une date limite. 

Pour une date dans le passe ou le futur, vous pouvez utiliser la fonction 
date(). Celle-ci prend deux arguments. Le premier est le format et le 
second, optionnel, est le time stamp d'Unix (nombre de secondes depuis 
le l er janvier 1970). Si ce second argument n'est pas fourni, la fonction 
utilise par defaut le time stamp du moment ou la fonction est appelee. 

Date("n") vous donne le mois courant sans adjonction de 0 et 
date("Ymd") vous retourne une date dans le format aaaammjj. 

La fonction mktime() cree un timestamp a partir des arguments 
respectifs : heure, minute, seconde, mois, jour, annee. Cette fonction est 
interessante dans la mesure ou elle rectifie les approximations de date ; 
ainsi, alors que le mois de fevrier comprend 28 jours en 2003, 
mkt i me (0 , 0 , 0 , 30 , 2 , 2003) donnera le timestamp du 2 mars 2003. 

Pour afficher une date quinze jours auparavant, ecrivez votre fonction 
comme suit : 

echo date("j/n/Y", mktime(0,0,0,date("n") , date("j")-15, date("Y"))); 

Pour faire le decompte avec une date dans le futur, comme la date limite 
pour gagner un concours : 

$date_butoir=mktittie(0,0,0,9, 26, 2002); 

/*ici vous avez le timestamp de la date butoir qui est 

le 26 septembre 2002*/ 
$jours_difference=(round(($date_butoir-time())/(60*60*24))) ; 
echo $jours_di fference; 



218 • Double Poche PHP & MySQL 



Calendriers, dates et autres agendas 

Vous decomptez le nombre de secondes de la date avec le nombre de 
secondes du moment present. Vous divisez pour avoir des jours, puis faites 
un arrondi du resultat pour eviter les virgules. Vous avez a chaque moment 
le nombre de jours qui separent les visiteurs d'un gain eventuel. 

Pour une date dans le passe, c'est le meme principe. 

Affichage d'un calendrier 

Pour afficher un calendrier, qui n'est rien moins qu'un tableau HTML, 
utilisez la fonction date(). 

Un calendrier qui donne le mois courant est un tableau compose de six 
rangs de sept cases. Le premier rang donne le titre de chaque colonne : 
dimanche, lundi, mardi, mercredi, jeudi, vendredi, samedi. 

Ensuite, le mois peut commencer un jour ou un autre de la semaine. Le 
jour courant sera signale par une couleur differente. Un formulaire dote 
d'un menu permet d'afficher n'importe quel mois. 

Pour ce faire, nous tisserons notre tableau avec une boucle qui s'arretera 
au nombre de jours dans le mois : date("t"). 

for ($=l;$i>=date("t");$i++) 

Pour le premier rang (en fait, le rang en dessous du nom des jours), on 
utilise : 

date("w", mktime(0,0,0,date("n") , 1, date("Y"))); 

La semaine commence le lundi, qui correspond au jour 1, et finit le 
dimanche, qui est le jour 0. 

Commencons notre programme par le formulaire d'affichage. II est 
compose d'un menu deroulant qui donne le choix sur six mois dans le 
passe et douze dans le futur. C'est une boucle. 

Listing 7.3 : Agenda sous forme de calendrier : agenda. php 

echo "<form action=\"$_SERVER[' PHP_SELF'] \" method=\"post\">" ; 
echo '<select name="i nstant" size="l">'; 
$date_inf= mktime(0,0,0,date("n")-6, date("j"), date("Y")); 
$date_sup= mktime(0,0,0,date("n")+12, date("j"), date("Y")j; 
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$moi s_f ranc=array ( ' 1 , 'janvier', 'fevrier', 'mars', 'avril', 'mai 1 , 
'juin', 'juillet', 'aout', 'septembre', 'octobre', ' novembre ' , 
'decembre ' ) ; 

for ($vari abl e_moi s=-6,$vari able_tabl eau=date("n" ,$date_inf ) ; 
$vari abl e_moi s<=12 ; 

$vari abl e_moi s++,$variabl e_tabl eau++) { 
if ($vari abl e_tabl eau==13) { 
$vari abl e_tabl eau=l ; 

} 

$chronos=mktime(0,0,0,date("n")+$variable_mois, date("j") , date("Y")) ; 
echo "<option val ue=\"$chronos\" " ; 
if ( !$vari abl e_moi s) { 
echo ' SELECTED'; 

} 

$moi s_courant=$moi s_f ranc ["$vari abl e_tabl eau"] ; 

$an_courant=date("Y" , $chronos) ; 

echo ">$moi s_courant ${an_courant}</option>"; 

} 

if (!$instant){ 

$instant=mktime(0,0,0,date("n") , date("j"), date("Y")); 

} 

$moi s=date("n" , "$instant") ; 
$moi s_en_f ranc=$moi s_f ranc ["$moi s "] ; 
$annee =date("Y","$instant") ; 
$tai 11 e_cal endrier="40%" ; 

?> 

Dans ce formulaire, nous fabriquons la variable $moi s avec le timestamp 
de chaque mois (six mois dans le passe et douze dans le futur). Si aucune 
selection n'est choisie, le timestamp retenu par defaut est celui du jour 
courant. 

La boucle produit deux variables independantes. Ici, $vari abl ejnoi s est 
la variable qui parcourt tous les mois a partir d'un point de depart 
correspondant a six mois avant la date du jour et d'une limite incluse 
correspondant a douze mois apres la date courante. La deuxieme variable 
est $vari abl e_tabl eau, qui parcourt le tableau des noms de mois en 
francais. Le tableau commence par une cellule vide pour plus de confort ; 
ainsi, chaque mois correspond a son indice (janvier a 1, fevrier a 2. . .). Le 
test sur !$variable_mois (ou $variable_mois==0) permet d' avoir le 
mois courant, qui sera le mois affiche par defaut dans le menu deroulant. 
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Nous finissons cette partie de programme en extrayant le mois et l'annee 
de la variable $instant pour afficher le mois en francais. Par ailleurs, 
nous alimentons une variable $tai 1 1 e_cal endri er qui permettra de 
moduler la taille du tableau HTML. 

Le tableau commence avec deux lignes, une pour afficher le mois et 
l'annee, l'autre pour afficher les jours de la semaine : 

echo "<table width=$tai 11 e_cal endri erxTRxTD C0LSPAN=\"7\"> 
$mois $annee</TD</TR>" ; 

echo "<TR><TD>1 undi</TD> <TD>mardi</TD> <TD>mercredi</TD> <TD>jeudi 
</TD> <TD>vendredi</TD> <TD>samedi</TD> <TD>dimanche</TDx/TR>" ; 

Nous arrivons maintenant au coeur de l'algorithme du programme, 
c'est-a-dire a l'ecriture de la boucle de creation du tableau. Elle contient 
trois variables ; la premiere est la variable $ jours, la deuxieme, la 
variable $jour_semai ne, et la troisieme, $cellules, qui s'arrete a 35 
quel que soit le nombre de jours. Le jour de semaine est un modulo de la 
variable $cel 1 ul es divise par 7 ; ainsi, cette variable $jour_semai ne se 
reinitialise a 0 chaque dimanche, puisque le dimanche est toujours un 
multiple de 7. La variable $ jours commence a s'afficher des qu'elle est 
plus grande que 0. Pour l'initialiser a 1, il faut reunir des conditions. 



Tab. 7.6 : Les conditions pour le trace du tableau HTML et le comptage 
des jours du mois 


Position du pointeur de la boucle 


Condition 


La premiere ligne du calendrier 


$cellules<8 


Le jour de la colonne correspondant 
au premier jour du mois 


$jour semaine==date("w", 
mktime(0,0,0,$mois, 1, $annee)) 



for ($jours=0,$cellules=l;$cellules<36; $cel 1 ul es++) { 

$jour_semaine=$cel 1 ul es%7; 

if ($jour_semaine==l) { 

echo "<TR>"; 

} 

/////////la ligne commence le lundi ////////////// 

if (date("j")==$jours && date("n")==$mois && date("Y")==$annee) { 

echo "<TD al ign=\"center\" bgcol or=\#FFFF66\">" ; 

} 

/*cette condition s'interroge si ce jour est aujourd'hui et 
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dans ce cas la 


case est coloree*/ 


else { 




echo "<TD align : 


: \"center\">" • 


} 

if ($cellules<8 


&& $jour semaine==date("w" , mktime(0,0,0,$mois, 1, 


$annee) ) ) { 




$jours=l ; 




//cette condition initialise la variable jours////////////// 


if ($jours>0 && 


$jours<=date("t",$instant)) { 


echo $jours; 
} 




el se { 




echo " "; 

} 





Le jour est affiche si la variable jours a ete initialisee et si le nombre de 
jours dans le mois n'est pas depasse. Si tel n'est pas le cas, on affiche le 
code HTML espace insecable (Non Break Space) pour que la bordure de 
la cellule soit affichee malgre tout. 



echo "</TD>"; 

if ($jour_semai ne==0) { 

echo "</TR>"; 

} 

/////le dimanche finit la ligne///////////// 

if ($jours>0){ 

$jours++; 

} 

if (date("t" ,$i nstant)==$jours && $jour_semaine==0) { 
break; 

} 

/*nous prevoyons le cas ou un mois de fevrier de 28 jours commence 
un lundi. Le break evite d'afficher une ligne de case vides*/ 

} 

echo "<table>"; 

?> 

Si vous voulez ajouter le saint du jour, vous trouverez, sur le site 
http://www.chez.com/sarthe/liens_saints.html, une liste de sites 
utiles. 

Votre calendrier peut fonctionner en l'etat, mais il serait plus interessant 
d'y adjoindre un agenda, sans compter que vous devez egalement 
ameliorer l'interface graphique. 
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Un agenda a jour 

L' agenda se presentera sous deux formes : la premiere articulee sur 
Faffichage de l'agenda et la seconde sous la forme d'une liste. Pour entrer 
les donnees, il suffira de cliquer sur une icone dans le calendrier pour voir 
s'ouvrir une fenetre et saisir du texte. 

Les jours marques d'un evenement presentent une autre icone qui affiche 
l'evenement dans une petite fenetre. Nous pouvons y adjoindre l'envoi 
d'un courriel comme pense-bete. 

Cette application sera a la disposition des membres inscrits dans le club. 
Nous etudierons l'application en eludant l'authentification, deja evoquee 
dans le chapitre L'internaute est d'abord une personne. 

La reflexion 

Posez-vous les deux questions suivantes : 

■ Archive-t-on les informations obsoletes ? 

■ Envoie-t-on un courriel pour que la personne soit avertie de l'echeance 
d'un "jour a contenu" ? 

Les choix sont de votre ressort, mais reflechissez aux implications de 
chaque choix. 

Parfois, nous nous plongeons dans d'anciens agendas. II est agreable de se 
rappeler les types de personnes que nous rencontrions et d'activite que 
nous pratiquions alors. Le mieux est peut-etre de laisser le choix aux 
membres du club. Au moment ou ils decident de beneficier de ce service, 
l'application leur propose de garder leurs archives ou de les detruire apres 
un mois, un trimestre ou un an. Cela implique l'ajout dans la table d'un 
champ qui indique le type de conservation. 

L'affichage de l'agenda sous forme de calendrier 

Reprenons le code du calendrier et ajoutons-y une requete SQL. La table 
agenda sera constitute d'une cle, du nom d' usage de la personne, du type 
de texte, du texte et de la date sous la forme AAAAMMJJHHSS. 
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$sql="CREATE TABLE agenda (clef INT(ll) DEFAULT '0' not null 
AUTOJNCREMENT, nom_usage VARCHAR(25) not null, 
type CHAR(l) not null, contenu TEXT not null, datedujour char(14) 
not nul 1 , 

PRIMARY KEY (clef), INDEX (clef), UNIQUE (clef))"; 
@mysql_query ($sql , $ i d_l ink); 

Le type text recoit un grand nombre de donnees de type texte qu'il 
entrepose en binaire mais qui restent affichables dans PhpMy Admin. 
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▲ Figure 7.3: Le calendrier comme agenda 



En haut de la page d'affichage de 1' agenda, nous irons chercher ces 
informations : 



if ( !$moi schoi si ) { 
$moischoisi=date("Ym") ; 

/*ici est affecte le mois par defaut a la variable si aucun mois 
n'est regu par la methode GET*/ 

} 

$sql="select * from agenda where nom_usage= 1 $nom_usage ' AND 
datedujour LIKE '${moischoisi }%' ORDER BY datedujour"; 
$resul tat=@mysql_query ($sql ,$id_l ink) ; 

Vous venez de rencontrer deux nouvelles notions representees par LIKE et 
%. LIKE est un operateur de comparaison comme le signe = mais il permet 
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d'utiliser des jokers comme % qui designent une suite de caracteres. La 
requete demande a rechercher tous les champs de la table agenda ou le 
nom d'usage est $nom_usage et la date du jour commence par la date 
courante au format AAMMMM. Nous ferons quelques modifications car 
on peut imaginer que le membre consulte n'importe quel mois. Par 
ailleurs, le fichier d'aufhentification nous donnera a chaque fois le nom 
d'usage. La commande ORDER ordonnera le resultat avant de le recevoir. 

Creons un tableau indexe par la cle et contenant la date du jour, qui 
comprend la date et l'heure sous la forme AAAAMMJJHHMMSS : 

whi 1 e ($rang=mysql_fetch_array ($resul tat)) { 
$datedujour=$rang[ 1 datedujour '] ; 
//j ' extrai e 1 e jour 

$lejour=(int)substr($datedujour, 6, 2); 
$clef=$rang['clef '] ; 
$contenu=$rang[ 1 con term '] ; 
$mots_contenus=spl i t (" ", $contenu,7); 

/*Le tableau obtenu contient un maximum de 7 elements chacun compose 
d'un mot mais dont le dernier contient le reste du texte*/ 
$contenu= ' 1 ; 

/*nous vidons la variable $contenu dont le contenu est dans le 

tableau $mots_contenus */ 

$i=lj 

while($i<6) { 

$contenu.=$mots_contenus[$i] ; 
$i++; 

} 

//reconstitution de $contenu 
$type=$rang['type'] ; 
$rv["$lejour"] []=$clef ; 
$rv["$lejour"] []=$type; 
$rv["$lejour"] []=$contenu; 
} 

/* Le tableau $rv a comme clef le jour du rendez-vous et comme valeur 
un tableau avec toutes les autres donnees*/ 
$armoi re_cl ef s=array_keys ($rv) ; 

/* sur cette ligne, on cree un tableau des clefs, c'est-a-dire de 
tous les jours qui sont presents dans la table. Nous savons que 
seuls les jours annotes sont presents.*/ 

Vous pouvez creer une table avec tous les saints de Fannee, de 1 a 366, 
avec deux champs, le jour et le saint du jour. Pour cela, creez ici un 
tableau pour les saints du mois. II suffit de faire une requete sur la table 
toussaint en trouvant le premier jour et le dernier jour du mois avec cette 
fonction : 
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function 1 imi tesjnoi s ($moischoisi) { 

$mois=(int)substr ($moi schoi si , 4, 2); 

$an= substr ($moi schoi si , 0, 4); 

$debut=mktime(12,0,0,$mois, 1, $an) ; 

$fin= mktime(12,0,0,$mois, date("t",$debut) , $an); 

Commencons par depecer la variable moi schoi si, qui est composee de 
quatre premiers chiffres dormant l'annee et de deux chiffres suivants pour 
le mois. Nous avons force le type pour $mois en ajoutant (int) devant ; 
ainsi, 02 devient 2. Ce n'est pas obligatoire. La fonction mkt i me ( ) qui suit 
fonctionne aussi avec 02 comme mois. Nous calculons ensuite le 
timestamp du premier jour du mois et celui du dernier jour avec la 
fonction mktime(). Pour la variable $fin, nous ne connaissons pas le 
dernier jour du mois, qui peut aller du 28 au 31. Pour le savoir, nous nous 
aidons de la fonction date avec le format "t" qui donne le nombre de jours 
dans le mois sur le timestamp $debut. 

$debut = date("z",$debut) ; 

/*les jours commencent a 0 ce qui va bien avec la requete SQL et 
la commande LIMIT*/ 
$fin = date("z",$fin); 
$limites[]=$debut; 
$limites[]=$fin; 
return $limites; 

//ici on retourne plusieurs valeurs a l'interieur d'un tableau 

} 

$1 imi tes=l imi tesjnoi s ($moi schoi si ) ; 
$debut=$limites[0] ; 
$fin=$limites[l] ; 

//$sql ="sel ect saints from toussaint limit $debut, $fin"; 
//$resul tat=@mysql_db_query ($dbname,$sql ,$id_l ink) ; 
//$tous_l es_saints [] = 1 ' ; 

/*on cree la premiere case vide pour que le jour du mois corresponde 
a 1 ' indi ce*/ 
//whi 1 e ($rang=mysql_fetch_array ($resul tat) ) { 
//$tous_l es_saints [] =$rang[' sai nt '] ; 

//} 
?> 

Maintenant, a l'interieur de chaque cellule du tableau cree pour afficher le 
calendrier, nous allons introduire un tableau pour afficher le jour et en 
dessous deux cases, l'une pour la presence d'un evenement et l'autre pour 
un autre element de votre choix, par exemple le saint du jour. 
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Pour cela, nous inserons dans la cellule encadree par la balise <TD> : 

<TABLExTRxTD col span="2"x/TDx/TR><TRxTD> 
< /TDxTDx /TDx/TRxTAB L E> 

Voici maintenant le programme : 

<div al ign="center"xTABLE width="95%« border=l> 
<? 

for ($jours=0,$cellules=l;$cellules<36; $cel 1 ul es++) { 
$jour_semaine=$cel 1 ul es%7; 

Pour obtenir le jour de semaine, il suffit de faire le modulo de 7 : 

if ($jour_semai ne==l) { 
echo »<TR height=\"100\">"; 

} 

Si le modulo est de 1, on commence la semaine par le lundi : 

/////////la ligne commence le lundi////////////// 

if (date("j")==$jours && date("n")==$mois && date("Y")==$annee) { 

echo "<TD align=\"center\" bgcol or=\#000000\">" ; 

} 

/*cette condition precedente s'interroge si ce jour est aujourd'hui 
et dans ce cas la case est coloree*/ 
else { 

echo "<TD al ign=\"center\" val ign=\top\">" ; 

} 

echo "<TABLE width=\"100\" border=OxTR height=\"50\"> 
<TD colspan=\"2\">"; 

//voici le premier ajout : voici la table 
if ($cellules<8 && $jour_semaine==date("w" , 
mktime(0,0,0,$mois, 1, $annee))){ 
$jours=l ; 

} 

//cette condition initialise la variable jours////////////// 
if ($jours>0 && $jours<=date("t",$instant)) { 

Le format t correspond au nombre de jours dans le mois. Cette condition 
demande si le nombre $ jours se situe entre 1 et le nombre de jours dans 
le mois. Si c'est le cas, on imprime le jour du mois. 

if (date("j")==$jours && date("n")==$mois && date("Y")==$annee) { 

echo "<font color=\"#FFFFFF\" size=\"4\">"; 

} 
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else { 

echo "<font col or=\"#000000\" size=\"6\">" ; 
} 

echo "<div al i gn=\"center\">$jours</di vx/font>" ; 
} 

else { 

echo " "; 

} 

Le jour est affiche si la variable jours a ete initialisee et si le nombre de 
jours dans le mois n'est pas depasse. Si ce n'est pas le cas, on affiche le 
code HTML espace insecable (Non Break Space) pour que la bordure de 
la cellule soit affichee malgre tout : 

echo "</TD>"; 
echo "</TR>"; 

///premiere ligne de la table puis deuxieme ligne avec deux cases 

echo "<TR height=\"50\">"; 

echo "<TD width=\"50\">"; 

if (in_array ($jours,$armoire_clefs)) { 

$clef=$rv[$jours] [0] ; 

$type=$rv[$jours] [1] ; 

$contenu=$rv[$jours] [2] ; 

echo "<A HREF=\"#\" onCl ick=\"ouvri r_vasistas( 1 programmedujour.php? 
clef=$cl ef ' , ' vasi stas 1 , 'menubar=no,scrol 1 bars=no,statusbar=no, 
wi dth=300 , hei ght=200 ' ) \">" ; 
if ($type<l){ 

//ici nous affichons 1 'image qui correspond a un rendez-vous prive 
ou public 

echo "<img src= \"priv_rv.gif\" width=10 hei ght=10 border=0 
alt=\"$contenu\">"; 

} 

else { 

echo "<img src= \"pub_rv.gif\" width=10 hei ght=10 border=0 
alt=\"$contenu\">"; 

} 

echo "</A>"; 
} 

echo "</TD>"; 

echo "<TD width=\"50\">"; 

/*ici vous pouvez mettre une condition pour afficher le saint du jour 
echo $tous_l es_sai nts [$jours] ; mais nous preferons ajouter un lien 

pour ajouter un rendez-vous*/ 
echo "<img src= \"rendezvous.gif\" width=25 height=22 border=0 

al t=\"ajouter\">" ; 
echo "</TD>"; 
echo "</TR>"; 
echo "</TABLE>" ; 
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echo "</TD>"; 




if ($jour_semaine==0){ 




echo "</TR>"; 




} 

/////le dimanche finit 


la ligne///////////// 


if ($jours>0){ 




$jours++; 




} 

if (date("t" ,$i nstant) = 


=$jours && $jour_semaine==0){ 


break; 

} 





Avec le break, nous prevoyons le cas ou le mois de fevrier commence un 
lundi et comprend vingt-huit jours. Le break evite d'afficher une ligne de 
cases vides : 



} 

echo "<table>"; 

?> 

</div> 




LIMIT 

Vous pouvez limiter la requete SQL avec la syntaxe LIMIT 
premiere_l igne [,derniere_l igne] . Ainsi, le resultat ne 
contient pas les lignes de la requete commengant a premiere l igne, et 
finissant a derniere l igne ou a la fin des lignes appelees par defaut par 
la requete. 



L'affichage du contenu du jour 

Nous Faffichons dans une fenetre avec la fonction Javascript 
ouvri r_vasi stas ()deja etudiee. Le fichier se nomme : 

$sql ="SELECT datedujour, contenu FROM agenda WHERE clef='$clef 
and nom_usage= ' $nom_usage' " ; 
$resul tat=@mysql_query ($sql ,$id_l ink) ; 
whi 1 e($rang=mysql_f etch_array ($resul tat) ) { 
$datedujour=$rang[ 1 datedujour'] ; 

$heure=preg_repl ace("/\d{8} (\d{2}) (\d{2}) \d{2}/" , "\\1" ,$datedujour) ; 
$minutes=preg_replace(7\d{8}(\d{2})(\d{2})\d{2}/ l, ,"\\2",$datedujour); 
$contenu=$rang[ 1 contenu '] ; 
$armoire[]=$heure; 
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/*nous rangeons toutes les clefs dans une armoire pour les deceler 
ensuite avec la fonction in_array()*/ 
$1 i vredheures[$heure] [] =$mi nutes; 
$1 i vredheures[$heure] [] =$contenu; 
/* nous creons un tableau multidimensionnel*/ 
} 



IS! Le menu du jour - Netscape 6 


Uta'x' 


Fichier Edition Affjcher Rechercher Ajler a Signets 


laches Aide 


20 






21 

30 Appeler Philippe pour son anniversaire au 12 


345 678 











▲ Figure 7.4 : Le menu du jour 



Pour obtenir les minutes et les heures, nous utilisons une expression 
rationnelle qui pourrait etre remplacee par un appel a la fonction 
nombre_date() . Les heures vont servir de cles car l'affichage se fait avec 
un index de 7 a 24 qui affiche les heures. Nous avons construit les 
coulisses ; definissons maintenant la scene : 

Listing 7.4 : Le menu du jour : lemenudujour.php 

<!D0CTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transi ti onal //EN"> 

<html> 

<head> 

<title>Le menu du jour</title> 
</head> 
<body> 

<table width="95%" eel 1 spaci ng="2" eel 1 padding="2" al ign="l eft"> 
<? 

for ($i=7;$i<24;$i++){ 

echo '<tr al ign="l eft" val ign="middle">' ; 

echo "\n<td>\n"; 

echo $i ; 

echo "<BRxBR>" ; 

echo "\n</tdxtd>\n" ; 

if (in_array($i ,$armoire)) { 

$minutes=$l i vredheures [$i] [0] ; 

echo $minutes; 

echo "\n</tdxtd>\n" ; 

$contenu=$l ivredheures[$i] [1] ; 
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echo $contenu; 

echo "\n</tdx/tr>\n" ; 

} 

el se{ 

echo "\n</tdxtd>\n" ; 
echo "\n</tdx/tr>\n" ; 
} 
} 

?> 

</tabl e> 

</body> 

</html> 

L'index incremente les heures, et les donnees sont extraites s'il apparait 
que la cle est dans "l'armoire". 

L'affichage de I'agenda sous forme de liste 

Pour faire cet affichage de I'agenda sous forme de liste, il suffit de 
reprendre la requete de la page precedente et d'en changer la forme : 

Listing 7.5 : L'agenda sous forme de liste agendajiste.php 

if (strlen($datedujour)==14) { 

$sql="delete from agenda where nom_usage= ' $nom_usage 1 and 
datedujour= 1 $datedujour' " ; 
$resul tat=@mysql_query ($sql ,$id_l ink) ; 

} 

if (!$moischoisi) { 
$moischoisi=date("Ym") ; 
} 

$sql="select datedujour, contenu from agenda order by datedujour 
where nom_usage= 1 $nom_usage 1 and datedujour LIKE 1 $ {moi schoi si }% 1 " ; 
$resul tat=@mysql_query ($sql ,$id_l ink) ; 

Une fonction Javascript demande confirmation au membre desireux 
d'effacer une entree de I'agenda : 

function conf i rmEf facer() 

{ 

var accord=conf i rm("Vous voulez vraiment enlever cette entree de 
votre agenda ?"); 
if (accord) 

return true ; 

el se 

return false ; 

} 



Double Poche PHP & MySQL • 231 



7 



Des algorithmes, des outils et des fonctions 



Ici, il est dispose sous la forme d'une liste a puces : 

Listing 7.6 : /'agenda sous forme de liste agenda liste. php 

echo "<UL>"; 

while ($rang= mysql_fetch_array ($resul tat) ) { 
Scon tenu=$ rang [ 1 contenu '] ; 
if (strlen($contenu)>0) { 
$datedujour=$rang[ ' datedujour '] ; 
$heure=(int) subs tr($datedujour, 10,2) ; 
$minute = (int) substr($datedujour,12,2) ; 

$lejour=(int)substr($datedujour, 6, 2); 
$lejour. = " ${heure}h$mi nute" ; 
echo "<LI>\t${l ej our) \t${ contenu }\t 
<A HREF=\"$ SERVER[ 1 PHP_SELF 1 ] ?moi schoi si =$moi schoi si Matedujour 
=$datedujour\" 

onCl ick=\" return conf i rmEf facer () \">effacer</A>" ; 

} 
} 

echo "</UL>"; 



IS? Agenda sous forme de liste - Netscape 6 


EM*' 




Fichier Edition Afficher Rechercher ANer a Signets Taches 


Aide 




PrecedMt Rprhariw \rr£tor \ 1 


Imprime 




Rechercher 1 C 








Origine talNetscape.fr <\ Recherche Shop@Netscape 


Signets " v Net2Phone 




♦ 9 21h30 Appeler Philippe pour son anniversaire au 12 

• 18 14h30 Seance de Qi Gone a Paris 12e effacer 


345 678 effaifla: 


□ Q A OJ\*n\ http:. 127.0.0. i auobonsvivants/... 





▲ Figure 7.5: L 'agenda sous forme de liste 



Dans la liste, vous accedez directement au contenu de 1' agenda avec un 
lien pour effacer l'entree. 

Le formulaire pour ecrire dans I'agenda 

Pour entrer dans ce formulaire, nous ajouterons un menu dans la page 
calendrier de I'agenda. Ce menu nous donne le jour choisi sous la forme 
AAAAMMJJ et l'heure sous la forme HHMM. 



232 • Double Poche PHP & MySQL 



Calendriers, dates et autres agendas 

Le formulaire est tres simple, il contient un champ textarea nomme 
contenu et des boutons radio pour definir le type du message et son 
traitement. Pour modifier, ce sera aussi simple : 

if ($_GET['cle']){ 

La variable s'appelle cl e pour ne pas la confondre avec cl ef , donnee par 
l'authentification. Cette variable indique que le membre veut modifier son 
entree dans l'agenda. Nous recuperons ensuite les donnees dans la table : 

$cle=$_GET['cle'] ; 

$sql="select * from agenda where cl ef = ' $cl e ' AND 
nom_usage='$nom_usage' "; 
$resul tat=@mysql_query ($sql ,$i d_l ink) ; 
$rang=mysql_fetch_array ($resul tat) ; 
$contenu=$rang[ 1 contenu '] ; 
$datedujour=$rang[ ' datedujour '] ; 
$heure=substr($datedujour, 8, 2); 
$minutes=substr($datedujour, 10, 2); 
$type=$rang['type'] ; 
} 

?> 

Maintenant, nous disposons le formulaire dans une table : 

<table width="95%" border="0" eel 1 spaci ng="10" eel 1 padding="10"> 
<tr> 

<td width="19%">  </td> 
<td width="81%"> 
<form name="forml" method="post" action="agenda.php"> 

<textarea name="contenu" wrap="VIRTUAL" cols="80" rows="3"> 

<? 

echo $contenu 

?> 

</textarea> 
</td> 
</trxtr> 
<td width="19%"> 

<? 

if ($cle){ 

echo "<input type=\"hidden\" name=\"cl efdesol \" val ue=\"$cl e\">\n" ; 
} 

echo "<input type=\"hidden\" name=\"cettedate\" 

val ue=\"$datedujour\">\n" ; 

?> 
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Nous changeons le nom de la variable datedujour pour ne pas la 
confondre avec la meme variable qui existe dans le fichier agenda.php oil 
le formulaire est envoye : 

</td> 

<td width="81%"> 
<select name="heure"> 
<option value=""x/option> 

<? 

$heure=(int)$heure; 
for ($i=7;$i<24;$i++){ 
if ($i==$heure){ 
$select=" SELECTED" ; 

} 

el se { 
$sel ect= ' ' ; 
} 

Ici, le bloc el se permet de vider la variable. Si ce bloc n'existait pas, les 
derniers champs seraient toujours selectionnes puisque la valeur ne 
changerait plus. 

if ($i<10){ 

echo "<option val ue=\"0$i \"$sel ect>$i</option>\n" ; 
} 

el se { 

echo "<option val ue=\"$i \"$sel ect>$i</option>\n" ; 

} 

} 

?> 

</select> heure 
<select name="minutes"> 
<option value=""x/option> 

<? 

$minutes=(int)$minutes; 
for ($i=0;$i<60;$i++){ 
if ($i%15>0){ 
conti nue; 

//Nous n'affichons que les minutes des l/4h 
} 

if ($i==$minutes) { 
$select=" SELECTED"; 

} 

el se { 
$select=' 1 ; 

} 

if ($i<10){ 
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echo "<option val ue=\"0$i \"$sel ect>0$i</option>\n" ; 
} 

//necessite de faire preceder les unites d'un 0 
else { 

echo "<option val ue=\"$i \"$sel ect>$i</option>\n" ; 

} 

} 

?> 

</select> minutes 
</td> 

</tr> 
<tr> 

<td width="19%">  </td> 
<td width="81%">privé 

<? 

if ($type==l){ 
$coche2=" CHECKED" ; 

} 

el se { 

$cochel=" CHECKED" ; 

} 

echo "<input type=\"radio\" name=\"type\" val ue=\"0\"$cochel>\n" ; 
echo "public \n"; 

echo "<input type=\"radio\" name=\"type\" val ue=\"l\"$coche2>" ; 

?> 

</td> 
</trxtr> 
<td width="19%"> </td> 
<td width="81%"> 

<input type=" submit" name="Submi t" value="Envoyer"x/form> 
</td> 
</tr> 
</tabl e> 



Enfin, nous ajoutons le traitement des donnees grace au fichier 
agenda.php, en haut de l'application : 



Listing 7.7 : Formulaire pour /'agenda : agenda_ecrL 
if ($_POST['cettedate']) { 
$clefdesol =$_POST['clefdesol'] ; 
$type =$_P0ST['type'] ; 
$contenu =$_P0ST[ ' contenu '] ; 
$datedujour =$_POST['datedujour'] ; 
$cettedate=substr($_POST['cettedate'] , 0, 8); 
$cettedate.=$heure.$minutes. '00' ; 
if ($clefdesol==l){ 

$sql="UPDATE agenda SET type= 1 $type' , contenu= ' $contenu 1 
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datedujour='$cettedate' WHERE clef='$clefdesol' AND 
nom_usage= ' $nom_usage 1 " ; 
} 

el se { 

$sql="insert into agenda (nom_usage, type, contenu , datedujour) 
VALUES (' $nom_usage' , '$type', '$contenu' , 1 $datedujour' ) " ; 

} 

@mysql_query ($sql ,$id_l i nk) ; 

//le nom d'usage sera donne par 1 'authentifi cation 

} 
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▲ Figure 7.6: Formulaire d 'entree pour I 'agenda 



Voici done un agenda pour les membres du club. II sera interessant de leur 
envoyer un courriel pour leur rappeler un rendez-vous ; mais la, e'est a 
vous de jouer ! 

7.3 Un miniforum sur chaque page 

L'objectif est d'ouvrir certaines de vos pages a la discussion. Vous 
exposez, par exemple, un probleme ou une experience et desirez que les 
internautes reagissent. Rien de plus simple. 

Commencons par recuperer le nom du fichier pour creer le nom de la table : 

//////POUR RECUPERER LE NOM DU FICHIER SANS L 1 EXTENSION/// 
$extension=" .php" ; 

$table=basename ($_SERVER[' PHP_SELF'] ) ; 
////fonction basename()//// 
$table=ereg_repl ace($tabl e,$extension) ; 
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/*nous utilisons le nom du fichier sans son extension pour donner 

automatiquement un nom a la table*/ 
/*si votre version de PHP est au moins 4.1 vous pouvez mettre ces 

2 lignes en une seule*/ 

$table=basename ($_SERVER [ 1 PHP_SELF'] ,$extension) ; 
Ici on recupere le nom du fichier et on en retire 1 'extension. 
Oui nous sommes toujours dans les commentai res !*/ 
/////////////FIN RECUPERATION//////////////////// 

Le probleme ici est que certains caracteres admis pour le nom d'un fichier 
sont interdits dans le nom d'une table MySQL : 

//pour remplacer les quelques lignes au-dessus en anticipant un peu 
preg_match("r/.*/(.*)\. [A-zl-9] {3,4}$#\ $_SERVER[ ' PHP_SELF ' ] , $tableau) ; 
$table=$tableau[l] ; 

///nous remplagons les caracteres interdits pour une table/// 
$caracteres_defendus=array( ' - ' , ' '); 
while (list(, $valeur) = each ($caracteres_defendus) ) { 
$table=ereg_repl ace($valeur, '_' ,$tabl e) ; 

} 

/*si le fichier a un nom uniquement compose de chiffres, il n'est pas 
possible de creer une table avec ce nom, nous ajoutons done un 
espace 

blanc souligne. Vous aurez toutes les explications concernant les 
expressions rationnelles et en particulier ces quelques lignes dans 
le prochain chapitre. En fait, cette expression dit "si, dans le nom 
de la table, n'existe pas un caractere autre qu'un chiffre alors...". 
C'est une double negation*/ 

if (leregC ["0-9] 1 ,$table)){ 

$table.='_' ; 

} 

////////////////f i n anti ci pati on/////////////////////////////////// 

Nous utiliserons une expression rationnelle que nous etudierons dans le 
chapitre suivant, qui fonctionnera quelle que soit l'extension (.php, .php3, 
.php4, .phtml. . .). Si la table n'existe pas dans la base, nous la creons avec 
le nom forge auparavant : 

/*LIGNES DE CREATION DE LA TABLE QUE VOUS POURREZ ENLEVER OU PAS, 
UNE FOIS LA TABLE CREEE*/ 
$sqll="SELECT clef from Stable"; 
$resultat = @mysql_query ($sql 1, $id_link); 
if (!$resultat){ 
$sql="CREATE TABLE Stable ( 
clef i nt (11) NOT NULL auto_increment, 

date TIMESTAMP(12) NOT NULL default '0', 

nom varchar(60) NOT NULL default ", 

email varchar(60) NOT NULL default ", 
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commentaire text NOT NULL, 

courriel char(l) NOT NULL default '0', 

poste tinyint(4) NOT NULL default '0', 

PRIMARY KEY (clef), 

UNIQUE KEY clef_2 (clef), 

KEY clef (clef) 

)"; 

@mysql_query ($sql ,$id_l i nk) ; 

/////////////////////7//FIN CREATION DE LA TABLE///////////// 

Si le formulaire pour entrer un commentaire a ete utilise, la variable 
commentai re existe et il est temps d'inserer les donnees dans la table : 

Listing 7.8 : le haut du mini-forum mini-forum haut.php 

$commentai re=$_P0ST[ ' commentai re 1 ] ; 

if (i sset ($commentai re) && !empty($commentaire)) { 

$nouveau_commentai re=stri psl ashes ($commentai re) ; 

$sql = "select email from Stable where courriel = 'l' AND email ! = '"'; 

$resul tat=mysql_query ($sql ,$i d_l ink) ; 

whi 1 e ($rang=mysql_fetch_array ($resul tat) ) { 

$nouvel_email=$rang['email '] ; 

mai 1 ("$nouvel_emai 1 " , "Forum $tabl e, "$nouveau_commentai re\n$nom\n" , 
"From: $email"); 

} 

$commentai re=nl 2br($commentai re) ; 
$date=time() ; 

$sql="insert into Stable (date, nom, email, commentaire, courriel) 
VALUES ('$date', '$nom', '$email', 1 $commentai re ' , ' $courriel 1 ) " ; 
mysql_query ($sql ,$id_l ink) ; 

} 

?> 

Avec cette application, nous avons rendu tout automatique pour que la 
table creee prenne le nom du fichier (attention de ne pas donner le meme 
nom a plusieurs fichiers dans des repertoires differents). Vous pouvez 
laisser les lignes de creation de la table car elles ne sont pas executees si 
la table existe avec au moins une ligne dedans. Cependant, elles ne servent 
plus a rien. 

Affichons maintenant les commentaires deja entres, accompagnes du 
formulaire pour les saisir. Les champs n'ont pas besoin d'etre verifies, seul 
le champ commentaire compte, et il est verifie avant l'insertion des 
donnees dans la table. L'internaute peut cocher une case s'il veut recevoir 
les autres commentaires par courriel. 
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echo '<p al ign="center"xfont face="Tahoma, Arial"xb> 

VOS COMMENTAIRES</bx/fontx/p>' ; 

$sql = "SELECT * FROM Stable"; 

$resul tat=@mysql_query ($sql ,$id_l ink) ; 

while ($rang=@mysql_fetch_array($resultat)) { 

$nom=$rang['nom'] ; 

$emai 1 =$rang [ 1 emai 1 ' ] ; 

$commentai re=$rang[' comment ai re '] ; 

$date=$rang['date'] ; 

$jourdhui=nombre_date($date) ; 

//nous utilisons la fonction vue dans le chapitre 3 
echo "<pxHR>auteur : <a href=\"mai 1 to:$emai 1 ?Subject=forum 
$tabl e\">$nom</a> <i>$jourdhui</i>.<br>" ; 
echo "$commentai re" ; 

} 

Nous affichons maintenant le formulaire : 

Listing 7.9 : le bas du mini-forum mini-forum bas.php 

echo "<pxhrxp>\n" ; 

echo '<table al ign="center">' ; 

echo "<trxtd>\n"; 

echo "<form action=\"$_SERVER[' PHP_SELF'] \" method=\"post\">" ; 
echo "Votre nom\n"; 

echo '</tdxtdxinput type="text" name="nom" size="40" 
maxl ength="60"> 

</tdx/trxtrxtd>Votre emai l</tdxtdxi nput type="text" 
name="emai 1 " 

size="40" maxlength="60"x/tdx/trxtrxtd>Votre 

commentai re</tdxtd> 
</tdx/trxtrxtd col span="2"xtextarea cols=80 rows=5 

name="commentai re"x/textareax/tdx/trxtrxtd col span="2"> 
Voulez-vous recevoir un email a chaque nouveau commentai re ? 

<input type="checkbox" name="courriel " value="l"x/tdx/tr> 
<trxtdxinput type=" submit" val ue="Inserez"x/tdxtdx/formx/td> 
</trx/table>' ; 
echo "\n<p>\n"; 



7.4 Sondages et concours 

Les sondages et les concours sont des formulaires comprenant des 
questions. Une fois le formulaire realise, il faut creer un affichage 
graphique pour le resultat du sondage. 
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Un sondage 



Pour le sondage, creez une table dans la base pour les reponses, un fichier 
avec l'affichage des questions et l'affichage des resultats une fois les 
questions traitees. La table est tres simple : 

$sql = "CREATE TABLE sonde (clef int(ll) NOT NULL auto_i increment, 
un int(ll) NOT NULL default '0', deux int(ll) NOT NULL default '0', 
trois int(ll) NOT NULL default '0', quatre i nt (11) 
NOT NULL default '0', PRIMARY KEY (clef)) "; 

@mysql_query ($sql , $ i d_l ink); 

Une fois la table creee, il faut inserer une ligne avec des 0 dans chaque 
colonne. 

Cette table est destinee a accueillir plusieurs types de sondages ; voila 
pourquoi le nom de ses colonnes est neutre. Cela evite de recreer a chaque 
fois une table. Pour un sondage, on considere que quatre reponses 
possibles sont suffisantes ; au-dela, le sondage devient une corvee pour les 
sondes. 

Dans le programme de sondage, deux pages differentes sont superposees : 
la page du formulaire et la page du resultat montre graphiquement. 
L'aiguillage vers l'une ou l'autre de ces pages est actionne par trois 
variables : $sondage, $un et $voi r. La premiere, $sondage, prouve que 
la personne a deja rempli le formulaire en appuyant sur le bouton submit. 
La deuxieme, que la personne a vu les resultats car la variable $un est 
initialisee uniquement dans cette partie. La troisieme est une variable 
supplementaire, utile pour installer un lien : 
<A HREF="sondage.php?voir=l">voir le resul tat</A>. 

Si l'une des trois variables existe, c'est la page resultat qui doit etre 
affichee sous forme graphique. 



Dans ce programme, nous commencons par inclure les 
pages .inc necessaires. Puis nous inserons, juste dessous, la 
liste des variables chargees de contenir les valeurs susceptibles de 




Variantes du programme en debut de fichier 
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changer d'un sondage a I'autre : Stable, $question, 
$reponse_l, $reponse_2, $reponse_3 et $reponse_4. Ainsi, 
vous pourrez copier le fichier en changeant simplement les 
valeurs de ces variables pour un nouveau sondage. 



Le programme n'utilise qu'une seule ligne dans la table. Cette ligne, a 
chaque reponse, est actualisee dans la colonne correspondant a la reponse. 




Creation automatique de la table 

Vous verrez dans le programme comment creer un pro- 
gramme en definissant automatiquement la table. II suffit de faire 
une requete SELECT. Ensuite, le resultat est teste et, s'il est faux, la table 
reste a creer. 



Pour mieux comprendre les resultats, chaque reponse affiche un graphique 
correspondant au pourcentage par rapport au nombre total des reponses. 
Pour faire ce graphique, il suffit de creer une image de 100 pixels de large 
et d'en afficher le pourcentage. Si la reponse represente 75 % des 
reponses, seuls 75 pixels de l'image sont affiches. 

<? 

incl ude_once " . . /commun/fonctions. inc.php" ; 

incl ude_once RACINE. "/commun/connexi on. inc.php" ; 

// APRES LES INCLUSIONS, LES VARIANTES SOUS FORME DE VARIABLES 

$table= ' sondage 1 ; 

$question="Quel vin preferez-vous ?"; 
$reponse_l="le vin rouge"; 
$reponse_2="le vin blanc"; 
$reponse_3="le vin rose"; 
$reponse_4="le vin champagni se" ; 
$image_l="un . jpg" ; 
$image_2="deux. jpg" ; 
$image_3="troi s. jpg" ; 
$image_4="quatre. jpg" ; 

///////////////////////////////////////////////////////////////// 
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Cette requete SQL ne sert qu'a tester V existence de la table et a la creer 
si elle n'existe pas : 

$sql 1="SELECT clef from Stable"; 

$resultat = @mysql_query ( $sqll, $id_link); 

if (!$resultat){ 

$sql="CREATE TABLE Stable (clef int(ll) NOT NULL auto_increment, un 
i nt (11) NOT NULL default '0', deux i nt (11) NOT NULL default '0', 
trois int(ll) NOT NULL default '0', quatre i nt (11) NOT NULL 
default '0', 
PRIMARY KEY (clef)) "; 

@mysql_query ($sql , $ i d_l ink); 

$sql="insert into Stable (un, deux, trois, quatre) 
values ( 1 ' , ' ' , ' ' , ' ' ) "; 

///////////////// CREATION D'UNE LIGNE VIDE/////////////// 

@mysql_query ( $sql , $id_link); 

} 

Nous abordons ici le traitement des donnees avec la mise a jour de la 
colonne correspondant au bouton coche dans le formulaire : 

if (i sset ($sondage) || isset($un) || isset($voir)) { 
/////////ICI SELON LA REPONSE, LA COLONNE CHOISIE EST MISE A JOUR// 
if ($sondage== ' un 1 ) { 
$sql2="UPDATE Stable SET un=un+l"; 
@mysql_ query($sql2, $id_link); 
} 

elseif ($sondage== ' deux' ) { 
$sql2="UPDATE Stable SET deux=deux+l" ; 
@mysql_query($sql2, $id_link); 

} 

elseif ($sondage== ' troi s ' ) { 
$sql2="UPDATE Stable SET trois=trois+l"; 
@mysql_query($sql2, $id_link); 

} 

elseif ($sondage== ' quatre 1 ) { 
$sql2="UPDATE Stable SET quatre=quatre+l" ; 
@mysql_query($sql2, $id_link); 

} 

$sql3="SELECT * from Stable"; 

////EXTRACTION DU RESULTAT APRES LA DERNIERE MISE A JOUR/// 

$resultat = @mysql_query($sql3, $id_link); 

$rang=mysql_fetch_array ($resul tat) ; 

$un=$rang[ 1 un '] ; 

$total=$un; 

$deux=$rang['deux'] ; 

$total +=$deux; 

$troi s=$rang[' trois '] ; 
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$total+=$trois; 
$quatre=$rang['quatre'] ; 
$total+=$quatre; 



Nous introduisons ici un test sur 0 pour eviter de generer une erreur : 



if ($un>0){ 

$unpourcent=($un/$total )*100; 
$unpourcent=(i nt)$unpourcent; 

} 



Nous forcons le type pour obtenir un nombre entier. Nous aurions pu 
utiliser la fonction floor(), qui serait son equivalent. La fonction 
floor() renvoie l'arrondi inferieur avec f 1 oor ($unpourcent) : 



if ($deux>0){ 

$deuxpourcent=($deux/$total )*100; 
$deuxpourcent=(i nt) $deuxpourcent; 
} 

if ($trois>0){ 

$troi spourcent=($troi s/$ total )*100; 
$troi spourcent=cei 1 ($troi spourcent) ; 



Pour que le total des pourcentages fasse 1, nous utilisons la fonction 
cei 1 (), qui renvoie l'arrondi superieur : 

} 

if ($quatre>0){ 

$quatrepourcent=($quatre/$ total )*100; 
$quatrepourcent=cei 1 ($quatrepourcent) ; 

} 
} 

?> 



Voyons maintenant le code HTML, qui est une imbrication entre le 
formulaire de participation au sondage et le resultat du sondage lui-meme. 
L'affichage de l'un ou de l'autre se fait en fonction de l'existence de trois 
variables : $sondage, $un et $voir. 



Listing 7.10 : un sondage sondage.php 

<html> 
<head> 

<title>Le sondage des Bons Vivants</title> 
<meta http-equiv="Content-Type" content="text/html ; 
charset=iso-8859-l"> 
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<script 1 anguage="JavaScript"> 
<!-- 

function close_window() { 
window. closet) ; 

} 

//--> 

</script> 
</head> 

<body bgcol or="#FFFFFF" text="#003366" 1 ink="#6699cc" 
vl i nk="#336699" al i nk="#FF0000"> 
///ICI COMMENCE LE TABLEAU///////////////////////// 
<table border="l" eel 1 spaci ng="0" eel 1 paddi ng="2" vspace="0" 
hspace="0" al ign="l eft"> 
<tr al ign="center" val ign="top"> 
<td colspan="3" bgcol or="#336699"> 

<? 

echo "<font face=\"Tahoma\" size=\"3\"xbxfont col or=\"#FFFFFF\ 
$questi'on</font></bx/font>\n</td>\n</tr>" ; 

echo "<form action=\"$_SERVER[' PHP_SELF'] \" method=\"post\">" ; 
if (i sset ($sondage) || isset($un) || isset($voir)) { 
echo '<tr al i gn=" 1 eft " val ign="top">' ; 
echo '<td colspan="3"> <brxfont face="Tahoma" size="2" 
color="#1562AD"xb>' ; 
echo "Sur un total de $total reponse"; 
if ($total>l){ 
echo 's'; 

//////////SI LE TOTAL DEPASSE 1, LE MOT EST AU PLUPJEL 

} 

echo "</bx/fontx/td>" ; 
echo '</tr>'; 

} 

?> 

//////////////////debut premiere ligne et premiere reponse 
<tr al ign="center" val ign="top"> 

<td colspan="3" height="20"> <font face="Tahoma" size="2" 
col or="#1562AD"xbx/bx/f ont> 

</td> 
</tr> 

<tr al i gn=" 1 eft " val ign="top"> 

<? 

echo "<td al ign=\"l eft\"xfont face=\"Arial , Helvetica, 

sans-serif\" size=\"2\" color=\"#000000\">$reponse_l 
</fontx/td>\n" ; 

echo "<td> <font face=\"Tahoma\" size=\"2\" col or=\"#1562AD\">\n 
if (!isset($un) && !isset($voir)) { 

////////SI C 1 EST LE FORMULAIRE, LE CHAMP EST AFFICHE// 
echo '<input type="radio" name="sondage" val ue="un"x/td> 
<td> </td>' ; 
} 
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el se { 

///////////////SIMON C'EST LE NOMBRE DE REPONSES A 1/// 
echo "$un reponse"; 
if ($un>l){ 
echo 's 1 ; 

} 

echo "<td> <img src=\" . ./images/$image_l\" 
width=\"$unpourcent\" height=\"8\" border=\"0\">" ; 

} 

?> 

</fontx/td> 
</tr> 

/////////////FIN PREMIERE LIGNE///////////////////////////// 
/////////////DEUXIEME LIGNE ET DEUXIEME REPONSE///////// 
<tr align="left" val ign="top"> 

<? 

echo "<td al ign=\"l eft\"xfont face=\"Arial , Helvetica, sans-serif\" 
size=\"2\" color=\"#000000\">$reponse_2</fontx/td>\n"; 
echo "<td> <font face=\"Tahoma\" size=\"2\" col or=\"#1562AD\">\n" ; 
if (!isset($un) && !isset($voir)) { 

echo '<input type="radio" name="sondage" val ue="deux"x/td> 

<td> </td>' ; 

} 

else { 

echo "$deux reponse"; 
if ($deux>l){ 
echo 's'; 

} 

echo "</tdxtd> <ittig src=\" . ./images/$image_2\" 
width=\"$deuxpourcent\" height=\"8\" border=\"0\">" ; 

} 

?> 

</fontx/td> 
</tr> 

//////////fin deuxieme 1 1 gne//////////////// 
///////////// tro ' is ie nle ligne et troisieme reponse/////////// 
<tr align="left" val ign="top"> 

<? 

echo "<td al ign=\"l eft\"xfont face=\"Arial , Helvetica, sans-serif\" 
size=\"2\" color=\"#000000\">$reponse_3</fontx/td>\n"; 
echo "<td> <font face=\"Tahoma\" size=\"2\" col or=\"#1562AD\">\n" ; 
if (!isset($un) && !isset($voir)) { 

echo '<input type="radio" name="sondage" val ue="troi s"x/td> 

<td> </td>' ; 

} 

else { 

echo "$trois reponse"; 
if ($trois>l){ 
echo 's'; 

} 



Double Poche PHP & MySQL • 245 



7 



Des algorithmes, des outils et des fonctions 



echo "</tdxtd> <img src=\" . ./images/$image_3\" 
width=V'$troispourcent\" height=\"8\" border=\"0\">" ; 

} 

?> 

</fontx/td> 

///////////////////fin troisieme ligne///////////////////// 
///quatrieme ligne et quatrieme reponse////////////////// 
<tr al i gn=" 1 eft " val ign="top"> 
<? 

echo "<td al ign=\"left\"xfont face=\"Arial , Helvetica, sans-serif\" 
size=\"2\" color=\"#000000\">$reponse_4</fontx/td>\n"; 
echo "<td> <font face=\"Tahoma\" size=\"2\" col or=\"#1562AD\">\n" ; 
if (!isset($un) && !isset($voir)) { 

echo 1 <i nput type="radio" name="sondage" val ue="quatre"x/td> 

<td> </td>' ; 

} 

el se { 

echo "$quatre reponse"; 
if ($quatre>l){ 
echo 's'; 

} 

echo "</tdxtd> <img src=\" . ./images/$image_4\" 
width=V'$quatrepourcent\" height=\"8\" border=\"0\" >"; 

} 

?> 

</fontx/td> 
</tr> 

/////////////////////fin quatrieme ligne//// 

/////////ligne du bouton du formulaire ou de fermeture de la fenetre/ 
<tr align="left" val ign="top"> 
<td valign="top" al ign="l eft"> 
<? 

if (!isset($un) && !isset($voir)) { 

echo '<input type="submi t" val ue="Envoyez">' ; 

} 

?x/form> 
</td> 

<td al ign="right" colspan="2"> </td> 
</tr> 
</tabl e> 
</body> 
</html> 

Au fur et a mesure, nous introduisons des methodes qui faciliteront 
1' adaptation de vos programmes et vous feront gagner du temps. Vous 
pouvez utiliser n'importe quelle image, y compris employer la meme 
image pour les quatre reponses. La methode permet de se consacrer a 
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1' application plutot que perdre du temps a copier du code ou a se replonger 
dans du code ancien dont vous ne connaissez plus les tenants ni les 
aboutissants. 



Le sondage des Bon... |V][n~ X 





PrecedMt Recharger Arre; 


41 Origine tslNetscape.fr Recherche ^Shop 



Quel vin preferez-vous ? 



Sur un total de 92 reponses 



le vin rouge 
le vin blanc 
le vin rose 
le vin champagnise 
fermezlafenetre 



14 reponses — 
45 reponses 
25 reponses 
8 reponses — 



•* Figure 7.7 

Sondage 



Pour appeler cette page dans une petite fenetre, faites un lien avec un 
appel a la fonction Javascript nominee ouvri r_vasi stas () que nous 
avons vue. 

Un concours 

Pour le concours, c'est le meme systeme. Vous enlevez le graphique et 
ajoutez un champ pour le prenom, le nom et l'adresse e-mail ainsi que 
d'autres champs si vous le desirez. Le gagnant est tire parmi les bonnes 
reponses. Le concours est clos un jour avant la proclamation des resultats. 
Vous allez done creer une requete pour trouver le gagnant et le conserver 
sur deux fichiers avec des champs separes. 

Listing 7.11 : Recherche du gagnant : recherche_concours.php 

$sql = "select email, prenom, nom from concours where reponse2=T 
ORDER BY RAND() LIMIT 1"; 
$resul tat=@mysql_query ($sql , $id_l ink) ; 
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$rang=mysql_fetch_array ($resul tat) ; 
$emai 1 =$rang[' emai 1 '] ; 
$nom=$rang['nom'] ; 
$prenom=$rang['prenom'] ; 
$1 enom="$prenom $nom"; 
$lenom =majuscul es ($1 enom) ; 
$contenu_txt="${ 1 enom}§$emai 1 " ; 

chdi r( ' chemin/vers/1 e/repertoi re/choi si /pourl esf i chiers ' ) ; 

$fd_txtl=@fopen ("resul tat_concoursl .dat" , ' w 1 ) ; 

$ fd_txt2=@f open ("resul tat_concours2.dat" , ' w 1 ) ; 

Ofputs ($fd_txtl,$contenu_txtl, strlen ($contenu_txtl) ) ; 

Ofputs ($fd_txt2,$contenu_txt2, strlen ($contenu_txt2) ) ; 

@fclose($fd_txtl) ; 

@fclose($fd_txt2) ; 

$message="Bravo $lenom,\nvous venez de gagner le 
concours.\nl_e Webmaster"; 
mail ("$emai 1 " , "RESULTATS DU CONCOURS" , "$message" , "from:monsi te.com") ; 

Verifiez que ce repertoire existe avec tous les droits d'ecriture (chmod () ). 
Mettez ce fichier dans votre repertoire protege administration. Avant 
d'utiliser des bases de donnees, nous utilisions de simples fichiers. Ce 
systeme est utile ici car la requete est unique et le resultat, non 
reproductible. II peut aussi etre utile pour stacker les donnees et eviter, 
dans une page, de multiples requetes SQL gourmandes en ressources 
serveur. 

Voici le reste du programme que vous pouvez placer dans votre page 
d'accueil : 

Listing 7.12 : Le gagnant du concours : gagnant_concours.php 

$lejour=mktime (12, 0, 0, 9, 21, 2002); 
$lejourdapres=mktime (0, 0, 0, 10, 1, 2002); 
///le jour ou vous arreterez l'affichage 
if (time()>$lejour && time()<$l ejourdapres) { 
$fd_txt=@fopen( 1 concours/resu ltat_concoursl.dat ' , ' r' ) ; 
$contenu_txt = @fread ($fd_txt, 
f i 1 esize ( ' concours/resul tat_concoursl.dat ' ) ) ; 
@fclose($fd_txt) ; 
if ( !$contenu_txt) { 

$fd_txt=@fopen( 1 concours/resul tat_concours2.dat ' , ' r' ) ; 
$contenu_txt = @fread ($fd_txt, filesize 

( 1 concours/resul tat_concours2.dat 1 ) ) ; 
@fclose($fd_txt); 

$ fd_txtl=@f open ("resul tat_concoursl .dat" , ' w' ) ; 

Ofputs ($fd_txtl,$contenu_txt, strlen ($contenu_txt) ) ; 

@fclose($fd_txtl) ; 
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///Nous reapprovisionnons le premier fichier// 
} 

$1 eschamps=expl ode( 1 § 1 ,$contenu_txt) ; 
$1 enom=$l eschamps [0] ; 

echo "Le gagnant du concours est $lenom !"; 
} 

Nous avons place plusieurs champs dans le fichier pour que vous 
compreniez comment cela fonctionne. Vous pouvez ainsi mettre plusieurs 
lignes, chacune contenant des champs, et lire chaque ligne avec fgets() 
ou mettre le fichier dans un tableau avec une ligne par element grace a 
file(). 



Les fonctions concernant le systeme de fichiers 



Tab. 7.7 : Les fonctions pour lire et ecrire un fichier 


Fnnrtinn 




int copy (string source, 
string destination) 


Copie le fichier. 


int delete (string fichier) 


Supprime le fichier. 


int f close (int descripteur) 


Ferme le descripteur de fichier (voir fopen). 


int feof (int descripteur) 


Vrai si la fin du fichier est atteinte. 


string getc (int descripteur) 


Lit un caractere du fichier. Retourne faux si la fin 
du fichier est atteinte. 


string fgetcsv (int 
descripteur, int longueur [, 
string separateur]) 


Lit et retourne les champs d'un fichier csi/dans 
un tableau (; comme separateurs). 


string fgets (int 
descripteur, int longueur) 


Lit et retourne une ligne de fichier. 


string fgetss (int 
descripteur, int longueur) 


Lit et retourne une ligne de fichier qu'il 
debarrasse de ses balises. 


array file (string fichier) 


Lit un fichier qu'il retourne dans un tableau ligne 
par ligne. Si I'option est sur 1 , le fichier sera 
recherche dans le chemin. 


int fopen (string fichier, 
string mode) 


Ouvre un fichier ou une URL et retourne un 
descripteur. 
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Tab. 7.7 : Les fonctions pour lire et ecrire un fichier 


Fonction 


Description 


int fpassthru (int 
descri pteur) 


Affiche le reste du fichier. 


int fputs (int descri pteur, 
string car [, int longueur) 


Ecrit dans un fichier. L'option longueur est 
recommandee. 


string fread (int 

descri pteur, int longueur) 


Lit le fichier, au plus sur la longueur specifiee. 


int fseek (int descripteur, 
int debut) 


Place le pointeur sur une position donnee. 


mixed f scant (int 
descripteur, string format 
[, string varl]) 


Formate les donnees du fichier. 


int ftell (int descripteur) 


Retourne la position du pointeur interne. 


int fwrite (int descripteur, 
string car [, int longueur]) 


Ecrit une chame dans un fichier. 


int mkdir (string chemin, 
int mode) 


Cree un repertoire. 


int readfile (int fichier [, 
string chemin]) 


Lit un fichier et en affiche le contenu. 


int rename (string 
vieux nom, string 
nouveau nom) 


Renomme un fichier. 


int rewind (int descripteur) 


Place le pointeur au debut du fichier. 


int unlink (int fichier) 


Supprime un fichier. 



Tab. 7.8 : Les modes d'ouverture de fichier 


Mode 


Description 


R 


Lecture seule. 


R+ 


Lecture et ecriture. 


W 


Ecriture seule, ecrase le fichier s'il existe. 


W+ 


Lecture et ecriture, ecrase le fichier s'il existe. 
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Tab. 7.8 : Les modes d'ouverture de fichier 




Description 


A 


Ecriture seule, ajoute au contenu existant en plagant le 
pointeur en fin de fichier. 


A+ 


Lecture et ecriture, ajoute au contenu en plagant le pointeur en 
fin de fichier. 



Tab. 7.9 : Informations sur le statut du fichier ou du repertoire 


Fonction 


Description 


int chmod (string fichier, int mode) 


Les permissions sont changees sur 
des repertoires ou des fichiers. 


int file exists (string fichier) 


Vrai si le fichier existe. 


int fileatime (string fichier) 


Date du dernier acces au fichier. 


int filectime (string fichier) 


Date de modification du noeud. 


int filemtime (string fichier) 


Date de modification du fichier. 


int fileperms (string fichier) 


Droits du fichier. 


int filesize (string fichier) 


Taille du fichier. 


int f i 1 etype (string fichier) 


Type du fichier. 


Bool is dir (string fichier) 


Vrai si c'est un repertoire. 


Bool is executable (string fichier) 


Vrai si le fichier est executable. 


Bool is file (string fichier) 


Vrai si c'est un fichier. 


Bool is readable (string fichier) 


Vrai s'il est lisible. 


Bool is writeable (string fichier) 


Vrai s'il est modifiable. 


Bool is linkinfo (string fichier) 


Vrai si le fichier pointe existe. 


String readlink (string chemin) 


Norn du fichier pointe. 


array stat (string fichier) 


Information sur le statut. 


int touch (string fichier [, int time]) 


Met a jour I'heure de modification. 


int umask (int masque) 


Definit un masque de permission 
par defaut (I'oppose de chmod). 
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chmod 

Comme chmod utilise un nombre octal, il est indispensable de 
le noter precede d'un 0, par exemple sous la forme 0755. 



Voici les valeurs des permissions chmod pour Unix. 



Tab. 7.10 : Permissions de fichier ou de repertoire de 0755 


Permission 


Proprietaire 
(owner) 


Groupe 
(group) 


Public 
(other) 


Lecture (4) 


X 


X 


X 


Ecriture (2) 


X 


0 


0 


Execution (1) 


X 


X 


X 



Total 



4+2+1=7 



4+1=5 



4+1=5 



Ici, l'umask du fichier est 022, c'est-a-dire qu'il exclut la permission 2 
(ecriture) pour le groupe et le public. Vous affichez les interdictions plutot 
que les permissions. Le umask sert de configuration par defaut sur un 
serveur pour une creation de fichier. II est configure dans le repertoire 
etc/profile/ avec Unix. 

Les fichiers : 

■ 777. Tout le monde peut lire, ecrire et executer. 

■ 755. Le proprietaire (vos programmes) peut tout faire, groupe et public 
peuvent lire et executer. 

■ 644. Le proprietaire (vos fichiers) peut lire/ecrire, groupe et public, 
seulement lire. 

Les repertoires : 

■ 777. Tout le monde peut lire, ecrire et chercher. 

■ 755. Le proprietaire peut tout faire, groupe et public peuvent seule- 
ment chercher. 

Voici les reglages courants. 
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Les fichiers : 

■ scripts, 755 ; 

■ fichiers de donnees, 666 ; 

■ fichiers de configuration, 644 (pour les fichiers non modifies par des 
programmes PHP). 

Les repertoires : 

■ 777 (n'oubliez pas de mettre les permissions adequates sur les fichiers 
a l'interieur). 



Tab. 7.11 : Arborescence 


Fonction 


Description 


bool chdir (string repertoire) 


Change le pointeur de repertoire 
courant. 


Void closedir (string descripteur) 


Ferme le descripteur de repertoire. 


int opendir (string chemin) 


Ouvre un repertoire. 


String readdir (int descripteur) 


Retourne le nom du fichier suivant 
associe au descripteur de 
repertoire. 


Void rewinddir (int descripteur) 


Place le pointeur au debut du 
repertoire. 


int rmdir (string repertoire) 


Supprime un repertoire (vide). 



Formater avec sprintfQ, sscanfQ, fscanfQ 



Tab. 7.12 : I 


.e formatage des donnees 








Affichage 








Pourcentage 


Pourcentage litteral. 


b 


Entier 


Binaire. 


c 


Entier 


Caractere ASCII de cette valeur. 


d 


Entier 


Nombre decimal signe. 


u 


Entier 


Nombre decimal non signe. 


f 


Nombre reel 


Nombre reel. 
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Tab. 7.12 : I 


.e formatage des donnees 








A (f i h rt a 

MTTicnage 


0 


Entier 


Nombre octal. 


s 


ChaTne de caracteres 


ChaTne de caracteres. 


X 


Entier 


Nombre hexadecimal dont les lettres 
sont des minuscules. 


X 


Entier 


Nombre hexadecimal dont les lettres 
sont des majuscules. 



7.5 Compteurs et statistiques 

Les compteurs et les statistiques sont, comme le stethoscope du medecin, 
des instruments d'ecoute de l'activite cardiaque de votre site. Analyser la 
circulation sur votre site vous permet de voir quels sujets sont plebiscites, 
done de projeter son developpement futur. 

La reflexion 

Le compteur est une colonne mise a jour a chaque chargement de la page. 
Pour avoir des statistiques, il suffit que le compteur incremente une ligne 
differente chaque jour. Ensuite, le jeu consiste a l'afficher en montrant les 
pages les plus souvent visitees et les statistiques quotidiennes et mensuel- 
les. Vous pouvez complexifier a loisir, mais les statistiques horaires ou 
annuelles presentent un moindre interet. 

Creer le compteur quotidien 

Dans la table compteur, nous inserons les champs : 

■ fois pour le nombre de chargements de la page ; 

■ date sous forme AAAAMMJJ ; 

■ page pour inserer le nom de la page et placer ainsi toutes les pages sur 
la meme table. 
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Creons la table : 



CREATE TABLE compteur ( clef int(ll) NOT NULL auto_i increment, 
fois int(ll) NOT NULL default '0', an char(2) NOT NULL default '0', 
mo is char(2) NOT NULL default '0', jour char(2) NOT NULL default '0', 
repertoire varchar(255) NOT NULL default ' 1 ,page varchar(60) 
NOT NULL default ", PRIMARY KEY (clef), KEY clef (clef)) 

Le principe est simple. Si la date est differente de la derniere date, on cree 
une nouvelle ligne dans la table ; autrement, on se contente de faire une 
mise a jour du champ fois qu'on incremente. 

La page est identifiee par la variable globale, $SCRI PT_FI LEIMAME, qui 
donne le nom du fichier et du repertoire depuis la racine du site (au-dessus 
du repertoire www ou htdocs) : 

Listing 7.13 : Les statistiques stats.inc.php 

<? 

$table= ' compteurs ' ; 

$chemin=ereg_replace( ' /le chemin vers/www' , ' ' ,$SCRIPT_FILENAME) ; 
$repertoi re=di rname($chemi n) ; 
$page=basename($chemin) ; 

$sql= "select * from Stable where page='$page' 
AND repertoire='$repertoire' ORDER BY clef DESC LIMIT 1"; 
//verifions la derniere date entree dans la table pour cette page 
$resul tat=@mysql_query ($sql ,$id_l ink) ; 
$rang=@mysql_fetch_array ($resul tat) ; 
$jour=$rang[' jour 1 ] ; 
$moi s=$rang[ 'moi s '] ; 
$an=$rang['an'] ; 
if ($jour!=date("d")){ 

//si la date est differente, la nouvelle ligne est creee 
$an=date("y") ; 
$moi s=date("m") ; 
$jour=date("d") ; 

$sql= "insert into Stable (fois, an, mois, jour, repertoire, page) 
VALUESCl', '$an', '$mois', '$jour', ' $repertoi re' , 1 $page' ) " ; 

} 

el se { 

//sinon elle est juste mise a jour 

$sql= "update $table set fois=fois+l where jour='$jour' AND mois= 
'$mois' AND an='$an' AND page='$page' AND repertoi re= 1 $repertoi re'" ; 
} 

@mysql_query ($sql ,$id_l i nk) ; 

?> 
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Pour appeler maintenant ce programme, il vous suffit de le nommer 
stats .inc. php et de l'inclure dans vos pages par la ligne : 

i ncl ude_once RACINE. "/commun/s tats. inc. php" ; 




$SCRIPT NAME ou $SCRIPT FILENAME 

Vous pourriez utiliser $SCRIPT_NAME, cela vous eviterait d'en- 
lever le chemin entre la racine et votre repertoire www. Cepen- 
dant, si vous avez des sous-domaines comme http://vins 
.bonsvivants.com, $SCRIPTNAME vous donnera le meme repertoire que 
pour http://www.bonsvivants.com, c'est-a-dire "/". Pour eviter ce pro- 
bleme, il vaut mieux utiliser $SCRI PT_FI LEIMAME et en enlever le chemin 
. au-dessus du repertoire web. 

V y 



Tab. 7.13: Decoupage du chemin d un fichier 


Fonction 


Description 


String basename (string chemin) 


Extrait le nom du fichier d'un chemin. 



String dirname (string chemin) 



Retourne le chemin sans le nom de fichier. 



La page d'affichage des statistiques de page 

Si vous avez bien concu votre site, vous avez groupe vos applications par 
repertoire. II devient alors interessant de disposer de statistiques par 
repertoire en plus des statistiques par fichier. Quant aux statistiques 
quotidiennes et mensuelles, sans doute disposez-vous de chiffres fournis 
par votre hebergeur. Les votres les completeront et les affineront. Par 
ailleurs, vous avez un certain nombre de fichiers charges a chaque page. 
Ce n'est pas la peine d'inclure ces derniers dans vos statistiques. 

Pour la page, nous utiliserons des fonctions de manipulations de fichiers 
et de repertoires. 

La page comprend la liste des repertoires avec leurs statistiques par mois 
classees par ordre decroissant. Pour chaque repertoire affiche, un menu 
permet de choisir un fichier dont les statistiques s'ouvriront dans une 
nouvelle fenetre. 
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Listing 7.14 : Affichage des statistiques : affichage_stats.php 

<? 

$extensions=array ('htm', 'html', ' php ' , ' php3 ' ) ; 
echo '<TABLE width="95%">' ; 

$sql="select SUM(fois) as somme, repertoire, an, mois from compteurs 
GROUP BY repertoire, an, mois ORDER BY an, mois, somme DESC"; 
$resul tat=@mysql_query ($sql ,$id_l ink) ; 
whi 1 e($rang=@mysql_fetch_array ($resul tat) ) { 
$somme=$rang[ 1 somme'] ; 
$repertoi re=$rang [ 1 repertoi re ' ] ; 
$an=$rang['an'] ; 
$moi s=$rang[ 'moi s '] ; 
echo "<TRxTD width=\"18%\">"; 
echo "$repertoi re</TD>" ; 
$dernier_repertoi re=$ repertoi re; 
echo "</td><TD width=\"20%\">\n" ; 

echo "<form action=\"stats_fichier.php\" method=\"post\" 
target=\"_blank\">\n"; 
echo "<select name=\"fichier\">\n" ; 

$sql_fichiers="select page DISTINCT from compteurs where 
repertoi re='$repertoi re' ORDER BY page"; 
$resul t=@mysql_query ($sql_f ichiers,$i d_l ink) ; 
whi 1 e($rangee=@mysql_fetch_array ($resul t) ) { 

$page=$rangee['page'] ; 

preg_match(">r(.*)\. ([A-zO-9] {3,4})$#", $page, $tableau); 
$extension=$tableau[2] ; 

/* NOUS TRICHONS UN PEU style "Retour vers le futur". Nous vous 
expliquerons la manipulation dans le prochain chapitre. Promis! */ 
in_array ($extension, $extensions)) { 
echo "<option value=\""; 
echo "$repertoi re$page" ; 
echo "\">$page</opti on>\n" ; 
} 
} 

echo "</sel ect>\n" ; 

echo "<input type=\"submit\" val ue=\"voi r\">\n" ; 

echo "</form>"; 

echo "</TDxTD>"; 

if ($an!=$dernier_an) { 

echo $an; 

$dernier_an=$an; 

} 

echo "</TDxTD>"; 
echo $mois; 

echo "</TDxTD>$somme</TDx/TR>" ; 
} 

echo"</TABLE>"; 

?> 
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Par le formulaire et son menu deroulant, nous envoyons le chemin du 
fichier dont nous desirons afficher les statistiques. C'est le meme fichier. 
Dans le tableau HTML, il vous suffit d'enlever la colonne du formulaire 
et d'ajouter une colonne pour afficher le jour. 

N'oubliez pas d'ajouter les deux lignes suivantes : 

$repertoi re=di rname ($f i chi er) ; 
$page=basename ($f i chi er) ; 

Ensuite, la requete SQL est : 

$sql="select SUM(fois) as somme, fichier, an, mois, jour from 
compteurs GROUP BY fichier, an, mois, jour ORDER BY an, 
mois, jour somme DESC"; 

7.6 Le chariot electronique 

Imaginons que, dans ce club, un marchand de vin ou un producteur vous 
propose de mettre une boutique en ligne. 

Une boutique est avant tout une calculatrice qui suit le client de page en 
page durant sa visite. Nous gardons les informations pendant la visite. 
Elles correspondent aux articles achetes avec leur cle dans la table et leur 
quantite. 

Le catalogue consiste en une liste de produits dans chaque page, 
accompagnes d'une photo, d'un champ quantite et d'un bouton pour 
acheter. Cliquer sur le bouton ajoute dans le tableau en session une ligne 
comprenant la cle du produit et sa quantite. Une fenetre s'ouvre et 
confirme que le produit a ete ajoute dans le chariot. Dans chaque page sont 
affiches deux boutons, l'un pour voir le contenu du chariot et l'autre pour 
finir la visite et payer les marchandises avec le port. Ce tableau est 
construit avec comme cle la reference du produit (la cle dans la table 
produits) et comme valeur, la quantite. 

Le premier travail consiste a concevoir et a constraire la base de donnees. 
Dans l'exemple d'un vin, nous pouvons affiner les caracteristiques : 
nature (blanc, champagne, rose, rouge, mousseux), cepage, terroir, pays, 
annee, appellation, commentaire, contenance, prix, promotion. Ensuite, 
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vous creez une table avec ces caracteristiques. Nous pouvons integrer 
dans l'identifiant reference un certain nombre de renseignements qui 
economiseront de la place et du temps de frappe. Nous commencons par 
les trois premiers caracteres du type puis une lettre tiree d'une table 
caracterisant le cepage... Dans notre exemple, nous utilisons le vin, mais 
vous pouvez faire la meme chose avec des livres, de l'epicerie, des sejours 
a la montagne... Seules les caracteristiques changeront. Avant de com- 
mencer, visitez plusieurs sites sur le meme theme. 

La promotion 

La valeur promoti on peut etre constitute de la date de debut, de la date de 
fin, de la quantite et du prix sous la forme 2002090220020917330. Dans 
l'exemple, la promotion commence le 2 septembre 2002 (8 premiers 
chiffres 2002 09 02) et finit le 17 septembre 2002 (du 9 e au 17 e chiffre) ; 
enfin, l'offre consiste en trois bouteilles (18 e chiffre) pour 30 €, ou 30 $ (19 e 
et 20 e chiffres). Voila des astuces qui economisent de la place dans la base. 

Vous creez une fonction qui decode la reference et la promotion. Ce livre 
n'etant pas specialise dans le commerce des vins, nous n'entrerons pas 
dans le detail des references de vins. Si vous voulez approfondir, visitez 
l'excellent site www.vitis.org. Etudions de plus pres la fonction 
promotionQ : 

Listing 7.15 : Transformation du chiffre de la colonne promotion : 
fonction_promotion.php 

$moi s_f ranc=array ( ' 1 , 'janvier', 'fevrier', 'mars', 'avril', 'mai 1 , 
'juin', 'juillet 1 , ' aout ' , 'septembre', 'octobre', 'novembre', 
'decembre ' ) ; 

echo promoti on ( "2002091020020929330" ) 

function promoti on ($chiff re) { 

$debut=substr($chiffre,0,8) ; 

$an=substr($debut,0,4) ; 

$mois=(int)substr($debut,4,2) ; 

$mois= $mois_franc["$mois"] ; 

$jour= (int) substr($debut,6,2) ; 

$debut="$jour $mois $an"; 

$promo[ 1 debut '] =$debut; 

$fin=substr($chiffre,8,8) ; 

$an=substr($fin,0,4) ; 

$mois=(int)substr($fin,4,2) ; 

$mois= $mois_franc["$moi's"] ; 

$jour= (int) substr($fin,6,2) ; 
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$fin="$jour $mois $an"; 
$promo[ 1 f i n '] =$f in; 
$nombre=substr($chi f f re, 16, 1) ; 
$promo[ ' nombre '] =$nombre; 
$prix=substr($prix,17,2) ; 
$promo[ ' prix '] =$prix; 
return $promo; 
} 



Le prix affiche doit etre formate, car les nombres a virgule fiottante sont 
ecrits avec un point pour les decimales alors qu'en francais on utilise une 
virgule. Si un nombre comprend une virgule, il devient une chaine de 
caracteres. II existe une fonction pour remedier a ce probleme. 

Les prix 

Pour afficher vos prix, vous devrez les formater pour le francais. Dans la 
table produits, ce sont des nombres a virgule fiottante ou la virgule est 
representee par un point. 

numberformatQ 

Cette fonction sert a formater un nombre pour le conformer aux usages 
locaux. 

Syntaxe : string number_format ( float nombre [, int decimals [, 

string point_dec [, string sep_mi 1 1 iers]]] ) 

Pour formater un nombre en frangais, le code serait : 

$prix_total=number_format ($prix_total , '2', ' '); 

Dans cet exemple, nous afficherons un nombre qui comprend deux 
decimales apres une virgule et utilise une espace pour separer les milliers. 




Le nombre formate 

Le nombre formate a change de nature. II est non plus un 
nombre a virgule fiottante mais une chaTne de caracteres. Cela 
signifie que, si vous le traitez avec un operateur arithmetique, il devient 
un entier et perd ses decimales. 

«« / 
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Les tables a creer 

Dans la table transport, vous avez deux champs, port et prix. Le chiffre 
inscrit dans la colonne prix correspondra a la limite superieure de 
l'intervalle de prix pour un port donne. La table clients dependra des 
champs du formulaire. Inspirez-vous de celui que nous avons vu au 
chapitre MySQL en action. La table commandes est un duplicata de la 
table produits a laquelle vous ajoutez une colonne pour inserer la cle de 
la table clients. Enfin, la table paiements contiendra la cl ef du client, la 
somme totale, la date et l'heure ainsi que le mode de paiement. Vous 
pouvez ajouter une table modes _paiement si vous le desirez, avec un code 
et un nom pour chaque mode. 

L'action "acheter un produit" 

Dans votre catalogue, vous affichez vos produits avec la photo, les 
caracteristiques. Quand l'internaute clique sur le bouton dans l'intention 
d' acheter le produit, il ne fait qu'envoyer un formulaire. Ce formulaire 
peut etre envoye a la page elle-meme ou a une autre page qui s'affiche 
dans une fenetre. Dans les deux cas, vous confirmez 1' achat du produit 
avec toutes les precisions. 

Pour I'affichage d'un certain nombre de donnees, voyez I'affi- 
chage d'un carnet de liens dans le chapitre Moteurs de 
recherche et expressions rationnelles. 

Le code du formulaire serait celui-ci : 

<form action="ajouter_chariot.php" method="post" target="chariot"> 
<? 

echo "<input type=\"hidden\" name=\"cl ef \" val ue=\"$cl ef\">" ; 
?> 

<input type="text" name="quanti te" value="l" size="2"> 

<input type="submi t" val ue="j ' achete"> 

</form> 
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Une seule table de produits 



Ce raisonnement part du principe que vous avez une seule 
table pour tous vos produits ou, pour le moins, une cle unique 
pour chaque ligne parmi tous les produits. 



Maintenant, pour traiter les donnees et afficher la confirmation, votre code 
ressemblera a celui-ci : 

<? 

session_start() ; 

$chariot ["$clef "] =$quanti te; 

session_regi ster(" chariot") ; 

i ncl ude " . . /commun/connexion.inc.php" ; 

i ncl ude " . . /commun/f one t ions. inc. php" ; 

i ncl ude " . . /commun/stats . i nc.php" ; 

Vous affichez ensuite le contenu du chariot. 



L'action "voir le contenu du chariot" consiste a afficher le contenu de la 
table produits en regard des numeros de cles, accompagne de la quantite 
et du prix. Pour voir le contenu, faites sur le tableau une boucle foreach 
dans laquelle vous envoyez une requete SQL. Sorti de la boucle, 
multipliez la quantite par le prix a V unite pour obtenir le prix correspon- 
dant a chaque article : 

<TABLE width="95%"> 

<TRxTD>....</TDxTD>uni te</TDxTD>qte</TDxTD>total article</TDx/TR> 
<? 

if ($action =='voir'){ 

foreach ($chariot as $cle=>$val){ 

echo "$cle=>$val<br>"; 

$sql="select * from produits where clef='$cle'"; 
$resul tat=@mysql_query ($sql ,$id_l ink) ; 
$rang=mysql_fetch_array ($resul tat) ; 
//PRENONS PRIX PAR EXEMPLE////// 
$prix_unit=$rang['prix'] ; 
$prix_total_arti cl e=$prix.*$val ; 
$sous_total_prix+=$prix_total_articl e; 
//NOUS CALCULONS LE SOUS-TOTAL//// 



L'action "voir le contenu du chariot" 
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$prix_total_arti cl e =number_fonnat ($prix_total_article, ' 2 ' , ' , 1 , 1 ' ) ; 

$prix_unit =number_format ($prix_unit, '2', 1 '); 

echo "<TRxTD>....</TDxTD> $pri x_uni t</TD><TD> 

<form action="ajouter_chariot.php" method="post" target="chariot"> 

<? 

echo "<input type=\"hidden\" name=\"cl ef \" val ue=\"$cl ef\">" ; 

echo "<input type=\"text\" name=\"quantite\" value=\"l\" size=\"2\"> 

</TD>\n"; 

echo "<TD>$pri x_total_arti cl e</TD>\n<TD> 

<input type=\"submi t\" value=\"je change la quantite\"> 

</formx/TD>\n" ; 

echo "<TDxform action=\"ajouter_chariot.php\" 
met hod=\" post \" target=\" chariot \">\n" ; 
echo "<input type=\"hidden\" name=\"act\" val ue=\"f\">" ; 
echo "<input type=\"hidden\" name=\"cl ef \" val ue=\"$cl ef\">" ; 
?> 

<input type=" submit" val ue="enl ever"x/form </TDx/TR> 
} 

echo "<TRxTD>....</TDxTD> </TDxTD>total article</TD> 
<TD>$sous_total_prix </TDx/TR>\n" ; 

Au bas de l'affichage du chariot, vous afficherez le port pour l'envoi, le 
total et un bouton commander. Ensuite, vous enregistrerez les coordon- 
nees du client et placerez tout le contenu du chariot dans une table : 

$sql="select port from transport where prix>$sous_total_prix 
ORDER BY prix LIMIT 1"; 
$resul tat=@mysql_query ($sql ,$id_l ink) ; 
$rang=mysql_fetch_array ($resul tat) ; 
$port=$rang['port'] ; 
$prix_total =$sous_total_prix+$port; 
$prix_total=number_format ($prix_total , '2', 1 '); 

echo "<TRxTD>....</TDxTD> </TDxTD>port</TDxTD>$port </TDx/TR>\n" ; 
echo "<TRxTD>....</TDxTDx/TDxTD>Total</TD> 
<TD>$prix_total </TDx/TR>\n" ; 

■HI 

Vous aurez remarque que $sous_total_pri x n'est pas encadre de 
guillemets simples car il s'agit d'une quantite. 

L'action "commander les articles" 

Pour creer la commande, il vous reste a definir un formulaire avec 
des champs caches dont les valeurs sont fournies par les variables de 
chaque article. Le bouton commande envoie les donnees dans la table 
commanded et ouvre le formulaire d'enregistrement du client. Dans ce 
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formulaire, nous conservons la cle de la table commandes avec la fonction 
mysql_insert_id(), puis l'inserons dans un champ cache pour avoir la 
possibilite d'ajouter la cle de la table clients, une fois les coordonnees de 
Finternaute enregistrees. Pour ajouter ce numero dans la table comman- 
des, inserez ces lignes juste apres la commande SQL pour la table clients : 

$sql="insert into commandes (les differents champs) 
VALUES (les differentes valeurs)"; 
@mysql_query ($sql ,$id_l i nk) ; 
$cl ef_commande=mysql_insert_id() ; 

puis dans le formulaire : 

<input type="hidden" name="cl ef_commande" val ue="$cl ef_commande"> 

Une fois les coordonnees du client inserees dans la table clients, ajoutez 
dans la table commandes : 

$clef_cl ient=mysql_insert_id() ; 

$sql ="update commandes set $clef_cl i ent= ' $cl ef_cl ient 1 
where clef= '$cl ef_commande'" ; 
@mysql_query ($sql ,$id_l ink) ; 



mysql insert id() 

Cette fonction correspond a la fonction MySQL : 
last_insert_id() . Elle permet done de recuperer la derniere 
valeur d'une colonne AUTOJNCREMENT. 



En haut du fichier, pour traiter la suppression d'un article par Finternaute 
qui aurait clique sur le lien enlever, nous ajoutons le code suivant : 

if ($_GET['act , ]== l f '){ 
$autre_chariot ["$cl ef "] =$quanti te; 
$chariot=array_diff ($chariot, $autre_chariot) ; 
} 

La fonction array_diff() recree le tableau $chariot en enlevant les 
elements communs avec le tableau $autre_chariot. Ainsi, l'article en 
question sera efface. 
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Fonctions d'arrondi augmentees des fonctions 
maximum et minimum 



Tab. 7.14 : Fonctions d'arrondi augmentees des fonctions maximum 
et minimum 


Fonction 


Description 


mixed abs (mixed nombre) 


Valeur absolue (non signee) du 
nombre. 


int ceil (float nombre) 


Arrondi a rentier superieur. 


int floor (float nombre) 


Arrondi a rentier inferieur. 


mixed max (mixed nombrel, mixed 
nombre2...) 


Plus grande valeur de la liste. 


mixed min (mixed nombrel, mixed 
nombre2...) 


Plus petite valeur de la liste. 


float round (float nombre [, int 
precision]) 


Arrondi. La precision optionnelle 
donne le nombre de decimales 
apres la virgule. 



7.7 Un magazine 

Le magazine utilise des tempi ates, qui sont des modeles, des gabarits ou 
des moules dans lesquels nous coulons du texte. Nous employons 
plusieurs techniques pour cela. Le modele est defini sur un logiciel de 
creation de pages web. Nous utilisons du faux texte, extrait de n'importe 
quel texte numerique. Les professionnels utilisent des textes en latin. Une 
fois le modele acheve, nous remplacons les differents textes par des 
balises. Puis le programme creera les fichiers fils a partir du modele, les 
fichiers qui, eux, seront veritablement affiches. 

Le processus de creation d'un numero se fait a partir d'un formulaire qui 
envoie du texte dans une table. Les colonnes ont le meme nom que les 
balises (numero, rabrique, page, titre, accroche, chapo, article...). Une 
fois le texte entre dans la base, le programme recupere le texte du modele 
et remplace, dans le fichier, les balises par le contenu des champs de meme 
nom avec une expression rationnelle. Enfin, il cree un fichier dans lequel 
il coule le texte contenu. 
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Si vous voulez modifier 1' article, il vous suffit ensuite de changer les 
donnees dans la base. Vous ecraserez ainsi le fichier precedent, qui 
possede un nom identique. 

Pour modifier le design de vos pages, travaillez sur le modele. Le contenu 
et le design sont clairement separes, ce qui donne plus de souplesse. Vous 
travaillez sur un modele et non sur chaque page. Ensuite, le changement 
se fait en un clic. 

La reflexion 

Cette application demande une longue reflexion. La maquette doit etre 
faite comme pour un magazine papier. Chaque page et article sont calibres 
avec le nombre de signes, la police... 

Pour l'abonnement, nous allons utiliser la table membres, dans laquelle 
nous ajouterons une colonne abonnement avec la date du dernier mois 
d'abonnement (AAAAMM), puisque cette revue est mensuelle. 

Le formulaire d'abonnement est tres simple, sans code PHP. La personne 
accede a la page par son identite de membre. Un formulaire contient un 
menu deroulant. Ce dernier donne la periodicite (trois, six, douze ou 
vingt-quatre mois). 

La premiere page du magazine affiche le sommaire et ne demande pas 
d'authentification ; en revanche, le magazine lui-meme demande l'authen- 
tification et la validite de la date d'abonnement. 

Les parametres pour un article pourraient etre la cle, le numero, la 
rubrique, la page, le titre, l'accroche, le chapo, 1' article, l'auteur et la date 
de la parution. 

Le sommaire cherchera le titre, l'accroche et l'auteur pour chaque article 
dans la table, en fonction du numero en cours. Les articles, en revanche, 
seront des pages statiques creees "en dur« par l'application, une fois pour 
toutes, a partir de la base de donnees. 

Dans 1' administration, une page affiche les abonnements en cours ou 
perimes avec un bouton prolonger. En effet, il se peut que vous ne 
disposiez pas du paiement electronique et receviez vos paiements par 
cheque. 
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Un formulaire permet d'entrer les articles dans la table. Une date de 
parution est decidee. Elle sera ajustee avec un formulaire capable de 
modifier la date de parution de ce numero. Dans le repertoire d' adminis- 
tration, le magazine a paraitre sera visible pour constater le travail effectue 
et ce qui reste a modifier. Plusieurs magazines seront en chantier avant la 
date de parution, jusqu'a ce qu'ils soient acheves. 

Les images possedent un nom qui comprend la place dans la page, le 
numero de page et le numero du magazine. La page peut etre divisee en 
neuf et codee (hg pour haut gauche, md pour milieu droit, mm pour milieu 
milieu, c'est-a-dire centre...). La premiere image situee dans le milieu 
gauche de la page 2 du numero 4 s'appellera 012mg4, la deuxieme image 
situee dans le haut gauche, 022hg4, etc. 

Une fois la date arrivee, le numero sera visible aux abonnes et un courriel, 
envoye automatiquement pour l'annoncer. Une application pour envoyer 
les courriels sera creee. Cette application enverra un courriel trois mois, 
puis un mois avant Fecheance de l'abonnement, pour demander a 
Fabonne s'il veut prolonger son abonnement. Quelques jours avant la 
parution du nouveau numero, il recevra un sommaire du numero a 
paraitre. S'il ne se reabonne pas, il recevra un questionnaire pour 
connaitre les raisons de son desabonnement. Dans cette application, la 
plus grosse partie de votre temps sera consacree a la reflexion et a l'etude 
du projet. La partie la plus lourde du code utilise est deja contenue dans 
ce livre. Nous allons diriger le projecteur sur des aspects particuliers de 
1' application, comme etudier le procede pour telecharger les images sur le 
serveur par un formulaire. 

Le formulaire pour entrer les images 

Les images sont regroupees dans un repertoire correspondant au numero 
du magazine, cree a la mise en chantier d'un numero. Elles sont 
repertoriees dans une table images_mag. A chaque image chargee, le nom 
est decode et la colonne nbre_images, incrementee de 1 sur la ligne 
correspondant a 1' article et au numero. Voici le formulaire dans le fichier 
nomme images _mag.php : 

<? 

echo "<form action=\"$_SERVER['PHP_SELF , ]\" method=\"POST\" 
enctype=\"mul ti part/form-data\">" ; 
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?> 

<table border="0" width="80%"xtrxtd> 

<input type="Hidden" name=" NAX_FILE_SIZE" val ue="2097152"> 

Fichier à transférer : </tdxtd> 

<input type=file name="userf i 1 e"> 

</tdx/trxtrxtdx/tdxtd align="center">' ; 

<input type="Submit" val ue="envoyer"> 

<tdx/trx/tabl e> 

</form> 



Telecharger une image 



'em* 1 



Avant de creer un formulaire pour telecharger une image, 
verifiez avec la fonction phpinfoQIes parametres upload_ 
max_fi lesize et upload_tmp_di r, qui renseignent respectivement sur la 
taille maximale des fichiers telecharges et le repertoire qui sert de sas 
aux images avant qu'elles ne rejoignent leur repertoire de destination. 



Images pour le magazine - Netscape 6 



^ Fichier Edition Afficher Rechercher Ajler a Signets Taches Aide 



4, 



4 

PrecedQt 



Recharger ftrrito □ "ttp://12»l | Rechercher 



Imprimer 



A 41 Origine talNetscape.fr C^Recherche .'^ Shop@Netscape Signets % Net2Phone v The Mozilla On 



Fichier a transferer : 



[ ParcoKir.. 
envoyer 



□ L_j .°. c '-j US j;.c..mp'-t : Term ne '6.93 ; 



▲ Figure 7.8 : Formulaire de telechargement 



Ajoutons maintenant le traitement de formulaire en haut du fichier. 
Trois caracteristiques : enctype="mul ti part/form-data" dans la 
balise form , MAX_FILE_SIZE en champ cache et <input 
type=file name="userf i le">, qui est un champ de chargement de 
fichiers qui affichera automatiquement un bouton parcourir pour que 
l'internaute puisse aller chercher le fichier sur son disque dur. 
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Listing 7.16 : le formulaire de telechargement de I'imagi 
images_mag.php 

<? 




if ($MAX_FILE_SIZE==2097152){ 

i f ($userf i 1 e_si ze<$MAX_FILE_SIZE) { 

copy ($userf i le, "F: /Program Fi 1 es/EasyPHP/tmp/" . "$userf i 1 e_name") ; 
$car_image=GetImageSi ze("$userf i 1 e") ; 
$1 argeur=$car_image[0] ; 
$hauteur=$car_image[l] ; 

if (($largeur+$hauteur>500) || $largeur>300 || $hauteur>300) { 
echo '<html><head><title>Erreur</title></headxbody>' ; 
echo 'Votre image est trop grande, vous ne pouvez depasser 
les 300 x 200 pixels on 200 x 300 pixel s .<br>' ; 
echo "Revenir au <a href=\"images_mag.php\">formul ai re</a>. " ; 
echo ' </bodyx/html > 1 ; 
exit(); 

} 

$taille=$car_image[3] ; 
$extension=substr($userf i 1 e_name,-4) ; 

/* Le signe - signifie que nous commengons a la fin de la channe de 

caracteres. */ 

$nom_i mage. =$extens ion; 

$sql="UPDATE magazine SET image_$col onne= ' $nom_image ' , 

1 egende_$colonne= 1 $1 egende' , tai 1 1 e_$col onne= 1 $tai lie' 

where nom_f i chier= ' $nom_f ichier ' " ; 
mysql_query($sql , $id_link); 

copy ("F:/Program Fi 1 es/EasyPHP/tmp/$userf i 1 e_name" , 

"F: /Program Fi 1 es/EasyPHP/www/images_rnagazine/$nom_image") ; 
chmod("F:/Program Fi les/EasyPHP/www/images_magazine/$nom_image" ,0766) ; 
unlink($userfile) ; 

} 

else { 

$annonce="<pxfont col or=\"#FF0000\">Votre fichier est trop gros, 
son poids ne peut depasser 2Mo</fontx/p>" ; 

} 
} 

?> 

Vous donner une application complete de ce type demanderait un livre 
entier. Le raisonnement a la base de l'envoi d'images comme de l'envoi 
d' articles est le suivant : la table pour chaque numero est creee avec tous 
les noms d'articles et tous les noms d'images. Les champs qui les 
accompagnent comme 1 egende, tai lie pour V image, titre, accroche, 
chapo... sont vides. A chaque entree, les champs sont completes pour le 
nom ou la rubrique qui correspond. Cela permet de mettre des menus 
deroulants dans les formulaires d'entree afin de choisir le numero de 
magazine, le numero de page... et ainsi de composer un nom qui existe 
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deja dans la table. II suffit alors de completer la ligne correspondant a ce 
nom, apres 1'envoi du formulaire. 

Vous l'aurez compris, la difficulte reside non pas dans le code mais dans 
F architecture de 1' application. Dans le prochain chapitre, nous verrons 
comment remplacer les balises du magazine par le contenu de la table 
dans les fichiers et comment elaborer un moteur de recherche dans les 
numeros et les pages du magazine. 

7.8 Une galerie photo 

L'application consiste a afficher des miniatures de photos dans plusieurs 
pages reliees. Vous pourrez utiliser un formulaire du type de celui etudie 
ci-dessus pour entrer les images. Celles-ci sont mises dans un repertoire 
qui sert de sas, en attendant d'etre traitees. Ce formulaire permet d' entrer 
les informations concernant V image dans la base de donnees. Le pro- 
gramme cree une copie miniature avec un prefixe. Sans entrer dans le 
detail de la pagination, nous allons voir le formulaire et son traitement et 
l'affichage des pages. 

Pour avoir plus de details sur la pagination, reportez-vous a 
I'annuaire de liens dans le chapitre Moteurs de recherche et 
expressions rationnelles ou au magasin electronique dans le 
chapitre Parsez-vous XML ? 

Le formulaire est un formulaire de telechargement que nous avons deja vu 
dans ce chapitre. A part les champs texte que vous y ajoutez, nous allons 
voir comment mettre un champ menu qui affiche les differentes galeries en 
lisant le repertoire principal et y relevant les differents dossiers qui y sont 
contenus : 

<select name="galeries" size="l"> 
<? 

$dossi er= ' galeries 1 ; 
$repertoi re=openDi r (gal eri es) ; 
whi 1 e ($gal erie=readDi r($repertoire) ) { 

if (($galerie !=".") && ($galerie !="..") && (!is_file($galerie))) { 
echo "<option val ue=\"$gal eri e\">$gal erie</option>" ; 
} 
} 

?> 

</select> 
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Voici la fonction qui cree une miniature de 1' image proportionnelle a la 
taille de l'image, ce qui permet d'avoir une certaine homogeneite des 
images affichees sur la page : 

function reduction($nom,$f ichier) 

//voici la fonction qui redimensionne les images 

{ 

$size = getimagesize("/chemin/galeries/$gal eri e/$f ichi er") ; 
$produit= $size[0]*$size[l] ; 
if ($produit>640000){ 
$multiple=6; 

} 

elseif ($produit>360000){ 
$multiple=5; 

} 

elseif ($produit>250000) { 
$multiple=4; 

} 

elseif ($produit>160000){ 
$multiple=3; 

} 

el se { 

$multiple=2; 

} 

$dest_l argeur = ($size[0] /$mul tipl e) ; 

//determine la taille de la miniature, ici 1 1 on desire qu'elles 
soient d'un si xi erne de leur taille normal e 
$dest_hauteur = ($size[l] /$mul tipl e) ; 

$src_img = imagecreatef romjpeg ("/chemi n/$userf i 1 e_name") ; 
$dst_img = imagecreatetruecolor($dest_largeur,$dest_hauteur) ; 

@imagecopyresampled($dst_img, $src_img, 0, 0, 0, 0, $dest_l argeur, 

$dest_hauteur, $size[0], $size[l]); 

// la fonction qui redimensionne les photos 

i mage j peg ($dst_img, " chemi n/gal eri es/$gal eri e/mini_$fichier", 60) ; 

//60 represente la qualite de l'image compressee de 1 a 100 

imagedestroy ($src_img) ; 

imagedestroy ($dst_img) ; 

//on libere la memoire 

} 

resize($nom, $fichier); 

?> 

Maintenant, voyons le code de la page d'affichage. Vous recuperez les 
donnees sur la table pour afficher les images avec les legendes adequates. 
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▲ Figure 7.9 : La page de la galerie photo 



Le code ressemble a ceci : 



whi 1 e($rang=mysql_fetch_array ($resul tat) { 

echo "<a href=\"$fichier\" target=\"_blank\" border=\"0\"> 

<img src=\"mini_$fichier\" height=\"$hauteur\" width=\"largeur\"> 

</axbr>$l egende<br>" : 

} 

Vous pourrez completer l'application en ajoutant une table pour les 
differentes galeries contenant un code, le nom, le nom de l'auteur, sa 
biographie, son site... La table des images se refererait au code dans la 
table galeries. 

Les donnees EXIF 

EXIF est un module de PHP qui lit les metadonnees integrees dans les 
photos numeriques. EXIF est une norme pour les constructeurs d'appa- 
reils numeriques qui inclut du code dans les photos. Ann de Futiliser, il 
vous faut verifier que vous disposez de ce module avec la fonction 
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phpinfo(). Dans notre exemple, nous allons lire la date de prise de vue, 
Fouverture de l'objectif, la vitesse d'obturation et la vitesse ISO. La 
norme est suivie avec parfois quelques liberies, et selon l'appareil 
certaines donnees seront presentes ou non. 

$exi f =read_exi f_data ($f i chi er) ; 
if (i sset ($exi f [ ' DateTimeOrigi nal '] ) ) { 
$date=$exi f [ 1 DateTimeOrigi nal 1 ] ; 

} 

if (!$date && isset ($exi f [ 1 DateTime 1 ] )) { 
$date=$exi f [ 1 DateTime '] ; 

} 

if ($date) { 

$date=spl i t ( ' : ' ,str_repl ace( ' ' , ' : ' ,$date) ) ; 

$date=mktime($date[3] ,$date[4] , 1 0 1 ,$date[l] , $date[2] , $date[0] ) ; 
//ici la date sera au format frangais 
setlocale (LC_ALL, 'fr_FR'); 
$ladate=strftime ("%e %B %Y, %Hh%M" , $date) ; 

echo $1 adate. "<br>" ; 



if (i sset ($exif[' COMPUTED 1 ] [ 1 ApertureFNumber '] ) ) { 
echo $exif ['COMPUTED'] [' ApertureFNumber'] . "<br>" ; 

echo $exi f [ ' ExposureTime'] . "<br>" ; 
if (isset($exif['ISOSpeedRatings'])) { 
$i so=$exi f [ ' ISOSpeedRati ngs '] ; 

elseif (i sset ($exi f [ 'MakerNote '] ) && i sset($exi f [ 'ModeArray '] ) ) { 
switch (@$exif ['ModeArray '] [16]) 
{ 

case 15: $i so="auto" ;break; 
case 16: $iso="50";break; 
case 17: $i so="100" ;break; 
case 18: $i so="200" ;break; 
case 19: $i so="400" ;break; 



if ($iso) { 

echo $iso."<br>"; 

} 

Ces morceaux de code constituent une base de travail sur laquelle vous 
pourrez construire une application personnalisee. 
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Avec des bases de donnees, le volume de donnees peut etre vertigineux, 
meme si vous n'atteindrez pas celui des grands annuaires de liens comme 
Yahoo ou Nomade. 

8.1 Un annuaire de liens 

Le principe ici est de partager des liens sur un site. Chaque membre pourra 
ajouter des liens arm que tout le monde en profite. 

Analyse du besoin 

Chaque lien entre comporte plusieurs parametres : 

■ l'URL ; 

■ le pointeur ou le texte qui apparait comme lien ; 

■ la categorie du lien ; 

■ la langue du lien ; 

■ la description du lien. 

Le camet de liens comprend deux niveaux de liens : 

■ les liens qui sont une composante du profil du membre intitulee Mes 

liens favoris ; 

■ les liens qui composent l'annuaire de liens. 
L'application pose trois problemes : 

■ Dans ce club de Bons Vivants, les membres possedent des interets 
communs et risquent de proposer plusieurs fois le meme site. 

■ Le nombre de liens ira croissant. Assez vite, il ne permettra plus de 
naviguer a vue. II faudra alors un radar, c'est-a-dire un moteur de 
recherche. 

■ Au fil du temps, un certain nombre de liens vont mourir, parce que les 
sites auront demenage ou n'existeront plus. II se peut egalement que 
le nom de domaine n'ait pas ete renouvele et qu'un site pornographi- 
que ait "squatte" le nom du site. 
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Reflexions 

Pour la plupart des parametres du lien, la selection est faite par le membre 
du club. L'internaute choisit le site, done l'URL, la langue et la 
description du lien. Pour le reste, il doit determiner la langue et la 
categorie. C'est a vous de lui proposer les differentes options. 

Les langues 

Vous ne proposerez pas toutes les langues du monde. Nous pouvons deja 
restreindre le choix aux langues europeennes et prendre, parmi elles, les 
plus frequentes en Europe Occidentale : francais, anglais, allemand, 
italien, espagnol et portugais. Ces langues seront codees selon leur pays 
d'origine (France, Grande-Bretagne, Allemagne, Italie, Espagne et Portu- 
gal). Cela nous permettra d'utiliser un bouton avec le drapeau du pays 
pour le choix d'une langue. 

Les categories 

La difficulte est ensuite de choisir les categories de liens. Certains sites 
cumuleront plusieurs categories. II est vrai qu'il vaut mieux vous accorder 
un peu de temps pour la reflexion car de cette etape depend la suite de 
votre application. II est toujours delicat de modifier l'application pendant 
qu'elle fonctionne. Trouvez l'equilibre entre le desir de tout controler et 
celui de se frotter a la realite et d'effectuer un ajustement. Vous pouvez 
lancer une application avec une phase de test et prevoir la possibility pour 
chaque membre de modifier les caracteristiques de ses liens. 

Nous allons proceder ainsi car la facilite d'ajustement d'une application 
est une des caracteristiques du langage PHP la plus interessante pour un 
site web. 

Le membre pourra a tout moment modifier les parametres du lien. 

Le probleme des doublons 

Si deux membres proposent le meme site dans V annuaire de liens et non 
dans le profil du membre, il nous faudra uniformiser les liens pour deceler 
les doublons. Ce tri se fera au moment de la requete SQL et de l'affichage 
des liens. 
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Le moteur de recherche 

Le moteur de recherche sera utilise pour les recherches en plein texte car 
pour les recherches par categories, les requetes SQL suffiront. Nous 
prevoyons aussi une recherche sur des mots tronques par le moyen des 
etoiles (le signe asterisque). Pour creer un moteur fin et puissant, nous 
utiliserons les expressions rationnelles de Perl disponibles en langage PHP. 

Le probleme des liens morts 

Pour epurer regulierement les liens morts dans l'annuaire, il existe deux 
possibilites : 

■ Nous creons un fichier qui n'est pas destine au public. II contient la 
liste de tous les liens. Cela veut dire qu'a F entree d'un nouveau lien, 
il est recree. Nous utilisons alors un logiciel libre comme Xenu 
(http: //home. snafu.de/ti lman/xenul ink. html) pour scanner les 
liens du fichier et les analyser. 
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■ Nous creons une application qui suit chaque lien et ramene les 
reponses HTTP. Nous recuperons l'en-tete HTTP et son code et 
effacons les liens qui generent une erreur. 

Elaboration des applications 

Pour elaborer l'annuaire, il nous faut creer le formulaire d'ajout de lien, 
puis 1'enrichir en gardant la possibilite de modifier ou supprimer le lien. 
Nous arrivons ensuite a la fabrication de la page d'affichage et de la 
requete du moteur de recherche dans la base. 

La deuxieme application, sur le tableau de bord de 1'administrateur du 
site, verifie les liens morts et cree la liste des mots les plus souvent 
demandes par les visiteurs. 

Creation du formulaire 

Pour commencer, nous creons la table des donnees. Nous ajouterons une 
table langue et une table categoric 

Voici les champs de la table liens _annuaire : 

clef int(ll) AUTOJNCREMENT 
pointeur varchar (50) 
lien varchar (70) 
categorie char(l) 
langue char(2) 
commentaire text 
moment int(8) 



Nous creons 


une table langue composee comme suit : 


CREATE TABLE 
PRIMARY KEY 


langue (code CHAR(2) not null, nom VARCHAR(12) not null , 
(code), INDEX (code), UNIQUE (code)) 


Ensuite, nous la remplissons ainsi : 


Tab. 8.1 : Codes ISO de la table langue 


Code ISO 


Langue 


fr 


frangais 


en 


anglais 
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Tab. 8.1 : Codes ISO de la table langue 



Code ISO 


Langue 


es 


espagnol 


de 


allemand 


it 


italien 


Pt 


portugais 



Dans la table categoriejiens, batie sur le meme modele avec les champs 
code et nom, nous inserons les categories : rencontres, producteurs, 
restaurants, dietetique, art de vivre, paysages et voyages. II vous suffit 
ensuite d'incrementer une lettre dans le code pour chaque insertion ('A', 
'B'...). 




el Utilisez des lettres pour le code 

Nous evitons de mettre un chiffre dans le code car nous n'en 
avons que dix a notre disposition, en incluant le 0. Si nous 
ajoutons des categories par la suite, il vaudra mieux disposer des 
vingt-six lettres. Si vous avez besoin de plus de code, incrementez les 
lettres comme nous I'avons vu au chapitre Les clefs du PHP sur les 
operateurs unaires. Ainsi, vous commencez une boucle a AA que vous 
incrementez. La boucle passera en revue toutes les combinaisons a 
deux lettres avec un code unique. 



Une fois les tables construites, interessons-nous au formulaire. Vous allez 
creer le formulaire, comme auparavant, avec les colonnes des tables de la 
base comme champs du formulaire. N'oubliez pas les deux menus crees 
a partir des donnees des tables langue et categoric Ensuite, creez le code 
Javascript et le traitement des donnees sur le meme fichier avec une 
requete SQL d'insertion, en testant la presence du champ cache $passage. 
A chaque insertion, le membre recharge la page d'insertion de lien. Elle 
est ornee d'un message qui lui annonce que le lien precedent a ete ajoute 
et qu'il peut en inserer un autre s'il le desire. 



280 • Double Poche PHP & MySQL 



Un annuaire de liens 



LAST INSERT JD() 



LAST_INSERT_ID() est une fonction MySQL tres pratique pour 
I'insertion d'une cle etrangere. Si vous utilisez la fonction AUT0_I IN- 
CREMENT pour generer une cle unique, vous pouvez, apres I'insertion de 
donnees dans une table, utiliser la derniere cle sans faire une requete 
SELECT. Une autre facon consiste a utiliser la fonction mysql_insert_i- 
d() apres une insertion. 



Nous allons detailler le traitement du formulaire mais auparavant, 
decortiquons la ligne contenant une expression rationnelle. 



Tab. 8.2: Le meme chemin sous plusieurs formes 



URL 

http 
http 
http 
http 
http 



/ /www . nh . ul tranet . com/-stewoody 

/ /www . nh . ul tranet . com/-stewoody/ 

/ /www . nh . ul tranet . com/~stewoody/i ndex . html 

/ /www . nh . ul tranet . com/-stewoody/i ndex . htm 

/ /www . nh . ul tranet . com/~stewoody/def aul t . php 



Le navigateur va traduire l'adresse pour arriver a la page index ou 
def aul t. Dans notre annuaire de liens, nous voulons eviter les doublons, 
c'est pourquoi il nous faut uniformiser la syntaxe des liens pour faire des 
comparaisons. L' expression rationnelle 

$1 ien=preg_repl ace http://) 

(.*)/((default) | (index))*(\.*)[A-zO-9]{0,4}$#\ "\U\\2", $lien); 

recherche une ligne qui contient une chaine de caracteres commencant par 
http:// et finissant par /defaut, index .html, php3 ou php. On 
raccourcit ici la chaine en enlevant toute barre oblique de fin et 
eventuellement tout nom de fichier en index ou default avec son 
extension. Dans le deuxieme membre de la fonction, nous recuperons le 
contenu des deux premieres parentheses. Toute URL sous cette forme sera 
raccourcie pour arriver a la forme de la premiere ligne du tableau. Nous 
parlerons de ce processus plus avant dans le chapitre. 
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$moment= date ("Ymd"); 

$passage=$_GET[ 1 passage '] ; 

if ($passage==l) { 

if (!ereg("http://",$lien){ 

$lien="http://".$lien; 

///////Nous ajoutons http:// s'il manque//// 
} 

$lien=preg_replace(">r(http://) (.*)/((default) | (index))* 
(\.*)[A-zO-9]{0,4}$#", "W1W2", $lien); 
//nous enlevons les / ou index... 

$sql="insert into 1 iens_annuai re (pointeur, lien, categorie, 
commentaire, moment, nom_usage, langue) VALUES ('$pointeur' , 
'$lien', '$categorie' , ' $commentai re ' , '$moment', '$nom_usage' , 
'$1 angue ' ) " ; 

@mysql_query ($sql ,$id_l i nk) ; 

En haut du programme, nous avons insere la ligne qui foumit la valeur 
de la variable $moment. Desormais, nous allons l'ajouter au fichier 
fonctions.inc.php pour l'avoir constamment a notre disposition. 

Pour extraire les liens de la table, nous utiliserons la clause DISTINCT. Nous 
avons rationalise la forme des URL avec une expression rationnelle. Les 
doublons auront la meme forme, ce qui nous permettra de les deceler. Deux 
membres qui ajoutent une reference au meme site mais a une page differente 
commettent-ils un doublon ? Non, car 1' information sera certainement 
differente. Les pages personnelles chez un meme hebergeur gratuit ont 
egalement le meme nom de domaine mais des sites totalement differents. 
Dans un cas comme celui-ci, il vaut mieux ne pas etre perfectionniste. 




Date() et mktime() ou TIMESTAMP 

Les deux solutions creent une date sous la forme d'un entier 
de type AAAAMMJJ. Dans les deux cas, ce nombre permet 
d'ordonner les dates facilement dans un ordre croissant ou decroissant. 
La fonction MySQL TIMESTAMP ajoute une date automatiquement. Son 
interet, qui devient un inconvenient dans certains cas, est qu'elle permet de 
modifier cette date a chaque changement de la ligne. Cette action est 
interessante si vous voulez connaitre la derniere date de mise a jour mais, 
dans le cas qui nous concerne, la date de creation est plus interessante. 
Nous ajoutons la date d'aujourd'hui avec les fonctions date() et 
mktimeO car ce nombre n'est pas modifie a chaque mise a jour de 
champ. 
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Modification ou suppression du lien 

Pour modifier le lien ou le supprimer, ajoutez un lien sur le tableau de bord 
des membres. Avant d'afficher ce lien, il faut que le membre en question 
ait place des liens dans la table. Une requete SQL permet de le verifier 
facilement : 

$sql = "select clef from liens_perso where nom_usage= ' $nom_usage 1 " ; 
$resultat=@mysql_db_query($dbname,$sql ,$id_l ink) ; 
$nombre_rangs=mysql_num_rows ($resul tat) ; 
if ($nombre_rang==l) { 

echo "<A HREF=\"modi f_l ien.php\">Hodi f ier ou supprimer un lien</A>"; 
} 

En haut du fichier modifjien.pkp, l'authentification conserve les donnees 
du membre. La page d'affichage consiste en une requete SELECT et une 
boucle sur son resultat. Sur chaque ligne sont elabores deux formulaires 
differents avec un seul bouton et un champ cache : 

$sql="select clef, pointeur, lien from liens_perso 
where nom_usage='$nom_usage"'; 
$resultat=@mysql_db_query($dbname,$sql ,$id_l ink) ; 
whi 1 e ($rang=mysql_fetch_array ($resul tat) ) { 
$clef=$rang['clef '] ; 
$poi nteur=$rang [ ' poi nteur ' ] ; 
$1 ien=$rang[ ' 1 ien '] ; 

echo "<A HREF=\"$1 ien\" target=\"_bl ank\">$poi nteur</A>" ; 
echo "<A HREF=\"inserer_l i en?ef fet=modi f ier&cl ef=$cl ef \" 
target =\"_bl ank\">modi f ier</A>" ; 

echo "<A HREF=\"$PHP_SELF?effet=supprimer&clef=$clef\" 
target =\"_bl ank\ ">supprimer</A>" ; 

m 

Page d'affichage 

Nous allons afficher les liens a la maniere d'un moteur de recherche 
comme Google. . . En haut des pages, nous allons concevoir un formulaire 
pour choisir les criteres d'affichage (langue, categorie) et les criteres de tri 
(alphabetique, date decroissante, nombre de liens par page). Nous 
inserons un champ de recherche juste avant le bouton Envoyer. 

La page est constitute de la liste des liens. En haut, une ligne indique le 
nombre total de resultats trouves et le nombre de liens affiches dans la 
page. En dessous s'affiche un lien vers la page suivante ou precedente. 
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Vous pouvez, bien sur, ameliorer cet affichage. Vous ajoutez, par exemple, 
une ligne de liens designant chaque page suivante. La page courante serait 
distinguee des autres pages car elle apparait en gras avec une absence de 
lien. Vous pouvez aussi creer un tableau colore oil chaque cellule contient 
le lien vers une page et ou la page courante est designee par une couleur 
differente. 

L'affichage par defaut aura comme caracteristiques le francais comme 
langue et "aucune categorie" comme autre critere. L'ordre par defaut peut 
etre la date decroissante, ainsi les visiteurs pourront prendre comme 
habitude de venir voir les dernieres insertions, une fois qu'ils connaissent 
tous les liens. Vingt liens par page par defaut permettront un temps 
d' affichage rapide de la page. 

Pour ameliorer la connaissance des visiteurs qui viennent sur votre site, 
nous ajoutons une table qui indiquera le nombre de fois ou un mot ou une 
expression est entree dans le champ de recherche. 

CREATE TABLE motscles (mot varchar(50) NOT NULL default ", 
fois int(10) NOT NULL default '1', PRIMARY KEY (mot), 
UNIQUE KEY mot (mot) ) 
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Pour l'application, si une variable n'est pas recue, sa valeur par defaut 
prend le relais. Les liens vers les pages suivantes contiennent les variables 
en mode GET : 

<? 

incl ude_once " . . /commun/fonctions. inc.php" ; 

incl ude_once RACINE. "/commun/connexi on. inc.php" ; 

incl ude_once RACINE. "/commun/s tats. i nc.php" ; 

$table= ' 1 i ens_annuai re' ; 

1 1 1 1 1 1 1 1 1 1 /EN-TETE HTML//////////////// 

echo '<html><headxtitle>Les liens du Club des Bons 

Vivants</title>' ; 

echo '<meta http-equiv="Content-Type" content="text/html ; 

charset=iso-8859-l">' ; 
echo '<script language="JavaScript">' ; 
echo 'function ouvrir_vasistas(adresse, nom_fenetre, 
caracteristiques) 

{ '; 
echo "\n"; 

echo " window. open (adresse, nom_fenetre,caracteri stiques) ;\n" ; 

echo "}\n"; 

echo "</script>\n "; 

echo "</head>\n "; 

/////////FIN EN-TETE HTML////////////////////// 
echo "<body bgcol or=\"#FFFFFF\" text=\"#000000\" 1 ink=\"#0000FF\" 
vlink=\"#6600CC\" al ink=\"#FF0000\">\n" ; 
echo '<p align="center"> 

<font size="7">LES LIENS DU CLUB DES BONS VIVANTS</fontx/p>' ; 
echo "\n"; 

Cette premiere partie inclut les fichiers indispensables et envoie le code 
HTML du haut de la page. Maintenant, construisons la requete SQL en 
fonction des choix de l'internaute avec un choix par defaut. 

/*Nous verifions si l'internaute A UTILISE LE FORMULAIRE pour 
changer les cri teres. Dans ce cas, il faut remettre l'affichage 
des liens a 0 */ 

if (count ($_P0ST)>0){ 

$debut=0; 

} 

////FIN TEST SUR FORMULAIRE//////////// 

/* nous allons maintenant creer des VALEURS PAR DEFAUT pour tous 
les champs qui ne sont pas renseignes par methode GET ou POST - A 
VOUS D'AJOUTER $_GET ou $_P0ST*/ 

if (!$nbre_affiche){ 

$nbre_affiche=20; 

} 
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if (!$debut){ 
$debut=0; 

} 

if (!$langue){ 
$1 angue= ' f r ' ; 
} 

//FIN INITIALISATION DES VARIABLES SUR LEUR VALEUR PAR DEFAUT 
/*CONTRUCTION LA REQUETE SQL AVEC 3 VARIABLES $tri pour les 
criteres d'ordre, $champ pour les criteres de champ, $limites 
pour les criteres de limite. Nous en profitons pour creer les 
champs GET dans 1 'URL*/ 
//D'ABORD LA CLAUSE WHERE////////////////////////// 
/*ici il est possible d'acceder aux liens personnels entres par 
un des membres en parti cul i er*/ 
if (strlen($nom_annuaire)) { 
$champ="where nom_usage LIKE '%$nom_annuai re%"' ; 
$trai ne="&nom_annuai re=$ recherche" ; 
} 

Les deux variables construites sont $champ qui aide a l'elaboration de la 
requete SQL au niveau des clauses et $traine qui complete le lien qui 
servira a transporter la requete vers les pages suivantes ou precedentes. 

///////////////////LE MOTEUR DE RECHERCHE/////////// 
elseif (strlen($mot_clef)) { 

$champ="where pointeur like '%$mot_clef%' OR 

contenu like '%$mot_cl ef%'" ; 

$traine="mot_cl ef=$mot_cl ef " ; 

} 

//////SINON, LE CHAMP LANGUE SERA TOUJOURS PRESENT// 
else { 

$champ ="where 1 angue= ' $1 angue 1 " ; 

$trai ne="&l angue=$l angue" ; 

if (strlen($categorie) && $categorie!=0) { 

$champ. = " AND categories ' $categorie"' ; 

$traine.="&categori e=$categorie" ; 

} 

} 

/////////////ORDRE TEMPOREL DECROISSANT OU HASARD///////// 
if ($ordre== 1 hasard ' ) { 
$nouvel_ordre='ORDER BY RAND() 1 ; 
$trai ne.="&ordre=$hasard" ; 

} 

else { 

$nouvel_ordre =' ORDER BY clef DESC; 
} 

?> 

<font si ze="-2"xi>Pour entrer vos liens, il vous suffit de vous 
<a href="http://bonsvi vants .com/cl ub/">inscri re au club 
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gratui tement</a>. Les liens sont ordonnés par ordre 

d 1 entrée, les derniers apparaissant en premier. 

Le menu ci-dessous vous permet égal ement de choisir 

la catégorie de 1 ien.</ix/fontxp> <div al ign="center"> 

<? 

//LE FORMULAIRE/ ////////////// 

Nous constraisons le formulaire qui precise les choix de l'internaute a 
Faide des champs pour la categorie de lien, la langue, le nombre de liens 
par page et les mots-cle recherches. Une option supplemental permet de 
proceder a un affichage aleatoire. 

$sql="select clef FROM categori es_l iens" ; 
$resul tat=mysql_query ($sql ,$i d_l ink) ; 
$nombre=mysql_num_rows ($resul tat) ; 

echo "<form action=\"$_SERVER[' PHP_SELF'] \" method=\"post\">" ; 
echo "<select name=\"categorie\" size=\"l\">"; 
echo "<option val ue=\"0\">choi si ssez parmi les $nombre</opti on>" ; 
$sql="select clef, nom FROM categories_l i ens" ; 
$resul tat=mysql_query ($sql ,$i d_l i nk) ; 
whi 1 e ($rang=mysql_fetch_array ($resul tat) ) { 
$nom=$rang['nom'] ; 
$clef=$rang['clef '] ; 
$nom=$rang['nom'] ; 

if ($categorie>0 && $categorie==$clef) { 
$select=' SELECTED'; 

} 

else { 

$select =' 1 ; 

} 

echo "<option value=\"$clef\""; 

echo $select; 

echo ">$nom</opti on>" ; 

} 

echo "</select>"; 
?> 

<br>langue du site 

<input type="radio" name=" langue" value="fr" 

<? 

if ($1 angue== ' fr ' || ! i sset ($1 angue) ) { 
echo " checked"; 

} 

echo ">"; 
?> 

<img src="drapeaux/france.gif" width=18 height=12 border=0> 
<input type="radio" name="l angue" value="en" 

<? 

if ($1 angue== ' en ' ) { 
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echo " checked"; 

} 

echo ">"; 
?> 

<img src="drapeaux/usa.gif" width=20 hei ght=12 border=0> 
<input type="radio" name="l angue" value="es" 

<? 

if ($1 angue== ' es ' ) { 
echo " checked"; 

} 

echo ">"; 

?> 

<img src="drapeaux/spain.gif" width=18 hei ght=12 border=0> 
<input type="radio" name="l angue" value="de" 

<? 

if ($1 angue— ' de ') { 
echo " checked"; 

} 

echo ">"; 
?> 

<img src="drapeaux/germany .gi f " width=18 hei ght=12 border=0> 
<input type="radio" name="l angue" value="po" 

<? 

if ($langue=='po'){ 
echo " checked"; 

} 

echo ">"; 
?> 

<img src="drapeaux/portugal .gi f " width=18 hei ght=12 border=0> 
<input type="radio" name="l angue" value="it" 

<? 

if ($1 angue== ' i t ' ) { 
echo " checked"; 

} 

echo ">"; 
?> 

<img src="drapeaux/italy.gif" width=18 hei ght=12 border=0> 

<? 

echo "<BR>\n"; 

echo "Tri au hasard : \n"; 

echo '<input type="checkbox" name="ordre" val ue="hasard"' ; 
if ($ordre== 1 hasard ') { 
echo " CHECKED"; 

} 

echo '><BR>'; 

echo "\nNombre de liens par pages : <select 
name=\"nbre_af f i che\">\n" ; 

$nombres=array ('20', '30', '50', '75', '100'); 
foreach ($nombres as $valeur){ 
echo "<option val ue=\"$val eur\"" ; 
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if ($nbre_affiche==$valeur) { 
echo " SELECTED"; 

} 

echo ">"; 

echo "$val eur</opti on>" ; 
} 

//la valeur choisie est affichee dans le menu avec selected 
echo "\n</sel ect>" ; 

echo '</div><brxdiv al ign="center">Cherchez avec un mot-clef 
<input type="text" size="30" name="mot_clef "></di v> 1 ; 
echo '<brxcenter><input type="submit" val ue="soumettre"> 
</centerx/form>' ; 

///////////////FIN DU FORMULAIRE///// 

La categorie est affichee comme un titre : 

////ICI NOUS AFFICHONS EN GRAND LA CATEGORIE////// 
if (strl en($categori e) ) { 

$sql = "select nom FROM categories_l iens where clef=$categorie"; 

$resul tat=@mysql_query ($sql ,$id_l ink) ; 

$rang=@mysql_fetch_array ($resul tat) ; 

$nom=$rang['nom'] ; 

echo "<h3>$nom</h3>" ; 

} 

La requete nommee $sql_total retourne le total de tous les liens 
demandes une fois les doublons elimines : 

$sql_total = "select count (DISTINCT lien) as nombre_total 
from Stable $champ"; 
//nous enlevons les doublons du compte avec DISTINCT 

$resultat = mysql_query ($sql_total , $id_link); 

$rang = @mysql_fetch_array ($resul tat) ; 

$nombre_total = $rang["nombre_total "] ; 

Voici la vraie requete pour la page. Elle ramene les donnees en fonction 
des parametres demandes par l'internaute : 

///ICI NOUS ALLONS CHERCHER LES DONNEES/// 

$sql = "select DISTINCT lien, clef, pointeur, categorie, 
contenu, nom_usage, moment, langue from Stable $champ 
$nouvel_ordre limit $debut, $nbre_affiche" ; 
$resultat = mysql_query ($sql , $id_link); 
$nombre_total_page_courante = @mysql_num_rows ($resul tat) ; 
if ($nombre_total < 1) { 
echo "<p>Il n'y a pas d'enregistrements dans cette page 
de liens.</p>"; 
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} 

el se { 

//determinons maintenant le debut et la fin de la prochaine page/// 
$prochain_index = $debut + $nbre_affiche; 
if ($prochain_index > $nombre_total ) { 
$prochain_index = $nombre_total ; 

} 

/*nous affichons la position de la page dans le total des 
enregistrements */ 
$premier = $debut + 1; 

echo "<pxb>af f i che de $premier a $prochain_index </b>"; 
echo "<b>sur un total de $nombre_total entrees</bx/p>" ; 
//Determinons le debut de la page precedente 

$precedent_i ndex = $debut - $nbre_af f i che; 
///a condition de ne pas etre avant le debut (0) /// 
if ($precedent_i ndex < 0) { 
$precedent_index = 0; 

} 

} 

?> 

<ul> 

<table border="0"> 
<tr> 

<table width="100%"xtr> 
<td align="left" width="50%"> 

<? 

//AFFICHE UN LIEN VERS LA PAGE PRECEDENTE 

if ($debut != 0) { 

$commence = "debut=$precedent_i ndex" ; 
echo "<a href=\"$_SERVER[ 1 PHP_SELF'] ?$commence$trai ne\">" ; 
echo "<b>Les $nbre_af f i che precedents</bx/a>" ; 
} 

?> 

</td> 

<td al ign="right" width="50%"> 
<?php 

/// AFFICHE LE LIEN VERS LA PROCHAINE PAGE/////// 
if ($prochain_index != $nombre_total ) { 
$finit = "debut=$prochai n_i ndex" ; 

echo "<a href =\"$_SERVER[ 1 PHP_SELF'] ?$f ini t$traine\">" ; 
$prochai n=$nombre_total - ($debut+$nbre_af f i che) ; 
if ($prochai n>$nbre_aff iche) { 
echo "<b>Les $nbre_affiche prochains</bx/a>" ; 
} 

else { 

if ($prochain!=l && $prochain>0) { 

echo "<b>Les $prochain prochai ns</bx/a>" ; 

} 

elseif ($prochain==l) { 
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echo "<b>La derniere entree</bx/a>" ; 
} 

} 
} 

?> 

Ce qui precede concerne la construction des liens vers les autres pages et 
leur affichage. Nous arrivons maintenant au corps de la page qui affiche la 
liste des liens. En bas de la page, nous affichons a nouveau les liens vers 
les autres pages pour le confort de l'internaute : 

</td> 
</trx/tabl e> 
</tdx/tr> 
<trxtd > 
<UL> 
<? 

/////////////////////// 
for ($index = 0; 
$index < $nombre_total_page_courante; 
$index++) { 

$rang = @mysql_fetch_array($resultat) ; 
$clef=$rang['clef ' ] ; 
$poi nteur=$rang[ ' pointeur '] ; 
$poi nteur=stri psl ashes ($poi nteur) ; 
$nom_usage=$rang['nom_usage'] ; 
$1 ien=$rang[' 1 ien '] ; 
$categorie=$rang[ 1 categorie '] ; 
Scon tenu=$ rang [ 1 contenu '] ; 
$contenu=stn psl ashes ($conterm) ; 
$nom_usage=$rang['nom_usage'] ; 
echo "<img src=\"puces/${categorie} .gif\" width=10 height=10 
border=0> 

<a href=\"$l ien\">$pointeur</axbr>$contenu<p>" ; 
} 

?> 

</ul> 

</tdx/tr> <trxtd> 
<table width="100%"xtr> 
<td align="left" width="50%"> 

<? 

//AFFICHE UN LIEN VERS LA PAGE PRECEDENTE 

if ($debut ! = 0) { 

$commence = "debut=$precedent_index" ; 
echo "<a href=\"$_SERVER[ 1 PHP_SELF'] ?$commence$traine\">" ; 
echo "<b>Les $nbre_af f i che precedents</bx/a>" ; 
} 
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?> 

</td> 

<td al ign="right" width="50%"> 
<?php 

/// AFFICHE LE LIEN VERS LA PROCHAINE PAGE/////// 
if ($prochain_index != $nombre_total ) { 
$finit = "debut=$prochai n_i ndex" ; 

echo "<a href=\"$_SERVER[ ' PHP_SELF'] ?$f ini t$traine\">" ; 
$prochai n=$nombre_total -($debut+$nbre_aff iche) ; 
if ($prochain>$nbre_affiche) { 
echo "<b>Les $nbre_af f i che prochains</bx/a>" ; 
} 

el se { 

if ($prochain!=l && $prochain>0) { 

echo "<b>Les $prochain prochai ns</bx/a>" ; 

} 

elseif ($prochain==l) { 

echo "<b>La derniere entree</bx/a>" ; 

} 

} 
} 

?> 

</td> 
</trx/tabl e> 
</u1> 
<bodyx/html> 

La page se termine par une requete SQL qui entre les mots-cle demandes. 
Cette table vous donnera une bonne indication sur les centres d'interet de 
vos visiteurs. 



Listing 8.1 : Affichage des liens sur plusieurs pages 
annuaire de liens. php 

<? 

/* POUR FINIR ON ENTRE LE MOT CLEF EVENTUEL DANS LA TABLE mots_clef*/ 
if (strlen($mot_clef)) { 

$sql="select * from mots_clef where mot= ' $mot_cl ef '" ; 
$resul tat=mysql_query ($sql , $i d_l ink); 
$nombre=mysql_num_rows ($resul tat) ; 
if ($nombre>0) { 

whi 1 e($rang=mysql_fetch_array ($resul tat) ) { 

$foi s=$rang[ 1 foi s '] ; 

$fois++; 

$str_update="UPDATE mots_clef SET foi s= ' $foi s ' where 
mot= 1 $mot_cl ef '" ; 

mysql_query ($str_update, $id_link) ; 

} 
} 
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el se { 

$sql="INSERT INTO mots_clef (mot) VALUES ( ' $mot_cl ef ) " ; 
mysql_query ($sql , $id_l i nk) ; 

} 
} 

?> 

Ce type d' application vous servira constamment. Le principe est d'afficher 
les donnees dans un ordre quelconque sur plusieurs pages. Les bases de 
donnees gerent des masses de donnees et ce type d'application est 
indispensable pour la purpart des pages qui affichent des listes. 

Verification des liens 

Pour cette verification, nous serons pragmatique. Theoriquement, il est 
possible de verifier les liens avec des fonctions PHP mais cela prend parfois 
beaucoup de temps et donne un resultat incertain. Pour une page de liens, 
il vaut mieux employer un logiciel gratuit qui permet une interrogation de 
plusieurs liens a la fois. Pour l'utiliser, nous creons un fichier qui contient 
tous les liens et un formulaire pour enlever les liens invalides. 

Dans la page de traitement de V insertion des liens que nous avons creee 
precedemment dans ce chapitre, nous ajoutons un peu de code : 

$contenu =' <!D0CTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 

Transitional //EN"> 

<html> 

<head> 

<title>Page de verification de 1 i ens</ti tl e> 
</head> 
<body> 

<H2>Verifi cation des 1 iens</H2><UL>' ; 

$sql="select clef, pointeur, lien from 1 iens_annuaire" ; 

$resul tat=mysql_query ($sql , $T d_l ink); 

whi 1 e ($rang=mysql_fetch_array ($resul tat) ) { 

contenu.= "<LIxA HREF=\"$1 i en\">$poi nteur</A> $clef\n"; 

} 

$contenu . = "/UI_>\n</body>\n</html >" ; 
$fd_txt=@fopen( 1 secret/tousl esl iens. htm' , 'w 1 ) ; 
@fputs ($fd_txt,$contenu, strlen ($contenu_) ) ; 
@fclose($fd_txt) ; 

Le fichier sera ecrase a chaque nouveau lien et reconstruit. Vous le mettez 
dans vos coulisses, par exemple un repertoire secret a qui vous donnez les 
permissions adequates et qui reste a l'ecart des robots parcourant le Web. 
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Un formulaire peut l'accompagner. 

Veuillez entrer les clefs des liens a ef facer :<BR> 
<? 

echo "<form action=\"$_SERVER['PHP_SELF'] \" method=\"post\">\n" ; 
?> 

Les clefs des entrees a ef facer, separees par des & 
<input type="text" name="cl efs" size="50"> 
<input type="submit" val ue="envoyez"> 
</form> 

En haut du fichier, vous ajoutez : 
<? 

incl ude " . . /commun/f one t ions. inc. php" ; 
incl ude RACINE. "/commun/connexion. inc.php" ; 
$lesclefs=explode('&' , $clefs); 
foreach ($lesclefs as $val){ 
$val =trim($val ) ; 

$sql="delete from 1 iens_annuai re where clef='$val '" ; 
mysql_query($sql , $id_link); 

} 

?> 

Robots.txt, un chien de garde pour les moteurs 
de recherche 

Dans le repertoire secret, vous placez les fichiers secrets qui doivent rester 
accessibles sur le Web pour vous. Aucun lien n'y mene. lis sont gardes par 
un fichier nomme robots.txt qui se trouve dans le repertoire www ou 
htdocs. Ce fichier est un fichier texte dans lequel vous inscrivez : 

User-agent: * 
Disallow: /secret/ 
Disallow: /tmp/ 

Disallow: /coul i sses/index.php 

L'exemple precedent demande aux robots fouineurs de ne pas indexer les 
repertoires secret, tmp et le fichier index.php dans le repertoire coulisses. 
Chaque fois qu'un robot visite un site, il commence par chercher ce fichier 
pour savoir ce qui ne doit pas etre indexe dans le repertoire web. 
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Moteur de recherche 



Nous allons maintenant etudier le principe d'un moteur de recherche en 
prenant comme cible les pages du magazine. Le principe est le meme que 
celui de l'annuaire de liens, une page d'affichage avec un formulaire pour 
entrer les mots recherches. 



Avant de traiter le formulaire, il faut constraire la requete a partir de mots 
entres et placer les resultats dans une table transitoire. Nous emplirons 
cette table avec les resultats puis la viderons. 

Cette table est la meme table dupliquee plusieurs fois dont les noms sont 
rechercheO, recherchel ... Avant d'utiliser l'une de ces tables, le pro- 
gramme cherchera un nombre sur un compteur qu'il incremente ou 
remplace par 0 s'il est egal a 10. 



A partir de la version 3.23.02, MySQL dispose de la possibi- 
lity de creer des tables temporaires. Cette astuce des tables 
transitoires vaut pour les versions anterieures de MySQL. 



En haut du fichier, nous avons cette requete : 
if (!$table){ 

$sql="select compteur from tabl es_temporai res" ; 

$resul tat= @mysql_query ($sql ,$id_l ink) ; 

$rang=mysql_fetch_array ($resul tat) ; 

$compteur=$rang [ 1 compteur ' ] ; 

$table= ' recherche ' .$compteur; 

$compteur++; 

if ($compteur==10) { 

$compteur= ' 0 ' ; 

} 

$sql ="update tabl es_temporai res set compteur= 1 $compteur '" ; 
@mysql_query ($sql ,$id_l i nk) ; 

} 

Creons un formulaire pour entrer les requetes des abonnes du magazine. 
Le champ comprend jusqu'a trois mots separes par un espace. 



Recherche dans la table MySQL 




Tables temporaires 
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<? 

echo "<form action=\"$_SERVER['PHP_SELF , ]\" method=\"post\">" ; 

?> 

Pour votre recherche, vous pouvez proposer jusque 3 mots 
separes par un espace 
<input type="text" name="tousl esmots" size="50"> 
<input type=" submit" val ue="Recherchez"> 
</form> 

Creons un formulaire pour entrer les requetes des abonnes du magazine. 
Le champ comprend jusqu'a trois mots separes par un espace. 

<? 

echo "<form action=\"$_SERVER['PHP_SELF']\" method=\"post\">" ; 

?> 

Pour votre recherche, vous pouvez proposer jusque 3 mots 
separes par un espace 
<input type="text" name="tousl esmots" size="50"> 
<input type="submit" val ue="Recherchez"> 
</form> 

Creons maintenant un tableau pour entreposer les mots : 

$dico=explode(" ",$touslesmots) ; 
$combi en=count ($di co) ; 
if ($combien==l) { 

$sql [] ="sel ect chemi n_compl et from magazine where article 
like '%$tab[0]%'"; 

} 

elseif ($combien==2) { 

$sql [] ="sel ect chemi n_compl et from magazine where article 

like '%$tab[0]%' AND article like l %$tab[l]%" 1 ; 
$sql [] ="sel ect chemi n_compl et from magazine where article 

like '%$tab[0]%' OR article like , %$tab[l]%" 1 ; 

} 

elseif ($combien==3) { 

$sql [] ="sel ect chemi n_compl et from magazine where article like 
'%$tab[0]V AND article like '%$tab[l]%' AND article like 
, %$tab[2]%" 1 ; 

$sql [] ="sel ect chemi n_compl et from magazine where article 

like '%$tab[0]%' AND article like , %$tab[l]%" 1 ; 
$sql [] ="sel ect chemi n_compl et from magazine where article 

like '%$tab[0]%' AND article like , %$tab[2]%" 1 ; 
$sql [] ="sel ect chemi n_compl et from magazine where article 

like '%$tab[l]V AND article like , %$tab[2]%" 1 ; 
$sql []="select chemi n_compl et from magazine where article 

like '%$tab[0]%' OR article like '%$tab[l]%' OR article like 

, %$tab[2]%" 1 ; 
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} 

foreach ($sql as $val){ 
$sql_sel ect=$val ; 

$resul tat=@mysql_query ($sql_sel ect,$i d_l ink) ; 
whi 1 e($rang=mysql_f etch_array ($resul tat) ) { 
$chemi n_complet=$rang [' chemi n_compl et '] ; 
$sql_insert="insert into $table (chemi n_complet) 
VALUES ( l $chemin_complet 1 )"; 
mysql_query($sql_insert,$id_l ink) ; 
} 
} 

Une fois cette table remplie avec les resultats, il vous suffit d'afficher les 
donnees. Vous avez sans doute compris le principe de ce moteur de 
recherche. Nous avons simplifie mais vous pouvez le rendre plus complexe 
avec une recherche sur plusieurs colonnes de la table. Si vous augmentez le 
nombre de mots, la complexite augmente proportionnellement. 

Indexation de tous les mots dans chaque f ichier 

Vous pouvez egalement indexer les mots de chaque texte et, un peu 
comme les compteurs de visites, compter le nombre de fois ou les mots 
apparaissent dans un texte. Vous prenez soin d'en exclure tous les mots ou 
signes non significatifs comme les articles, les prepositions, les pronoms, 
la ponctuation et les balises avec des expressions rationnelles. Nous allons 
etudier le raisonnement, les expressions rationnelles et les fonctions 
principales qui nous permettront de reussir ce moteur. 

Les fichiers indexes seront uniquement les nouveaux fichiers quand ils 
seront valides pour la parution. Le redacteur en chef declenchera 
lui-meme l'indexation avec son tableau de bord. Le moteur d'indexation 
va en recueillir les contenus, les epurer a l'aide d' expressions rationnelles, 
en calculer la frequence puis inserer ces donnees dans une table MySQL. 

C'est la frequence d'un mot dans un texte qui decide de sa place dans les 
resultats. Si un mot se trouve dans le titre, dans la description de la page 
ou dans ses mots-cle, il prend une valeur plus importante. 

Pour le repertoire du numero 4 du magazine, nous indexons les fichiers 
(les images sont toutes dans un repertoire different). 

$rep= 1 quatre ' ; 

$dir = opendi r("/$rep") ; 

while ($f = @readdir($dir)) { 
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if(!is_dir($f)){ 

$chemi n_f i chier="quatre/$f " ; 

Nous recuperons les balises met a qui sont en tete des fichiers HTML et 
contiennent les mots-cle ainsi que la description de la page avec la 
fonction get_meta_tags () : 

$titres=get_meta_tags( $f) ; 

$ti tre=$tabl eau_meta[ 1 keywords '] ; 

$ti tre. = " " .$tabl eau_meta[' descripti on '] ; 

Nous les joindrons au titre pour leur donner de l'importance. 
$fd_txt=@fopen($f,'r'); 

$contenu_txt = @fread ($fd_txt, filesize ($f)); 
@fclose($fd_txt) ; 

Pour extraire le titre, nous utilisons une expression rationnelle. 

pregjnatch ("/(<(title) M *>)+?((. |\n)*?) 
(<\/\\2>)/i " , $contenu_txt, $trouvai 1 1 es) ; 
$titre.= " " .$trouvai 1 1 es[3] ; 

C'est une expression de type Perl avec pregjnatch () que nous etudie- 
rons a la fin du chapitre. Elle sert a capturer les mots a Finterieur des 
balises <title> ou <TITLE> et </title> ou </TITLE>. 

Nettoyons maintenant le texte de ce qui est inutile : ponctuation, mots 
composes de moins de trois lettres et balises. Nous pourrions preciser 
egalement un certain nombre de mots inutiles. 

Avec ces deux fonctions, nous transformons les caracteres speciaux 
HTML (comme é en e) : 

$codage = getjitml Jransl ationjabl e(HTML_ENTITIES) ; 
$codage= array_f 1 i p($codage) ; 

// les clefs deviennent des valeurs et vice versa // 
$contenu_txt = strtr($contenu_txt, $codage) ; 

Enlevons la ponctuation : 

$contenu_txt=ereg_repl ace(" [[:punct :]] " , " ", $contenu_txt) ; 

II faudra faire des exceptions pour les mots comme "aujourd'hui" car ce 
mot serait divise en deux. 
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Enlevons les balises 
$contenu_txt=stri p_tags ($contenu_txt) ; 

et les mots de moins de trois lettres : 

$contenu_txt =ereg_repl ace(" ([[: space:]] |~) [A-zO-9] {1,2} [[: space:]] ", 
" " ,$contenu_txt) ; 

ainsi que les doubles espaces : 

$contenu_txt=ereg_repl ace(" [[:space:]] {2} " , " " ,$contenu_txt) ; 

Auparavant, faites un tableau de tous les mots inutiles (les, des, 
done, qui...) et une boucle sur chaque element avec la fonction 
ereg_replace(). 

Traitez ensuite $titre comme vous venez de traiter $contenu_txt pour 
compter la frequence des mots : 

$f requence_pl us=15; 

$tableau_de_ti tres= explode(" ", $contenu_txt) ; 
foreach($tableau_de_titres as $val){ 
for ($i =0 ; $ i <$f requence_pl us ;$i++) { 

/* choisissez la valeur en fonction de la longueur des fichiers, 
tout est relatif ici.nous avons choisi 15 */ 
array_push ($tabl eau_de_ti tres,$val ) 

} 

//nous ajoutons 15 fois chaque mot dans le tableau 
$tableau_de_mots=explode(" ", $contenu_txt) ; 

$tableau_de_mots=array_merge ($tabl eau_de_mots, $tabl eau_de_ti tres) 
$tabl eau_des_f requences=array_count_val ues ($tabl eau_de_mots) ; 

Faites ensuite un tableau de tous les mots : 

foreach ($tabl eau_des_frequences as $cle=>$val){ 
$sql="insert into atomes (chemin_fichier, mot, fois) 
VALUES ('$chemin_fichier' , '$cle', 'Sval')"; 
@mysql_query ($sql ,$id_l i nk) ; 

} 

Enfin, pour afficher les resultats, servez-vous de ce que vous avez appris 
avec 1' annuaire de liens. La requete SQL est la suivante : 

$sql="select chemin_fichier, mot, MAX(fois) as maximum from atome 
where mot='$mot' GROUP BY chemin fichier ORDER BY maximum DESC"; 
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Nouvelles fonctions 

arraycountvaluesQ 

Retourne un tableau avec comme cles les valeurs d'un tableau et leur 
frequence comme valeurs 

Syntaxe : array_count_values ( array tableau) 

get meta tagsQ 

Retourne un tableau forme des balises met a du fichier, les cles seront les 
noms des parametres et les valeurs, leur contenu 

Syntaxe: get_meta_tags ( string fichier) 
arrayflipQ 

Intervertit cles et valeurs au sein d'un tableau 
Syntaxe: array array_flip(tableau) 

get_html_translation_table(TABLE); 

Retourne le tableau des transcriptions HTML des lettres speciales (cedille, 
accents...) 

Syntaxe: get_html_translation_table(TABLE [, int type_gui 1 lemets] ) 

Options La table peut etre HTML_ENTITIES ou HTML_SPEC.IALC.HARS 

Les types de guillemets : 

■ ENT_COMPAT (par defaut), convertit les guillemets doubles mais pas les 
guillemets simples. 

■ ENT_QUOTES, convertit les deux : " devient " tandis que ' devient 
&#039. 

■ ENT_N0QU0TES les laisse intacts. 
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8.2 Les expressions rationnelles 

Dans le chapitre precedent, nous avons utilise des expressions rationnelles 
pour creer le nom de la table dans le programme mini-forum.php. 

Dans l'expression suivante, nous avons extrait le nom de fichier du 
chemin que nous avons ecourte de son extension : 

preg_match("r/.*/(.*)\.[A-zO-9]{3,4}$#", $_SERVER[ 1 PHP_SELF ' ] , $tableau); 

Ces signes vous apparaissent sans doute comme des hieroglyphes mais 
nous esperons qu'a la fin de ce chapitre, vous percevrez le langage 
particulier des expressions rationnelles ou regulieres. Nous utiliserons 
Fadjectif « rationnelle » pour caracteriser ces expressions car elles sont 
plutot irregulieres dans le sens ou elles ne regulent rien et sont utilisees 
differemment pour chaque cas. En fait, « reguliere » est la traduction de 
regular qui dans l'expression « regular expression » signifie « expression 
consacree ». Nous emploierons done le terme « expressions rationnelles » 
car ces expressions permettent une recherche generique ou abstraite sur un 
certain nombre de caracteres ou de groupes de caracteres. Le type de 
caractere et sa place sont traduits sous forme de caracteres de description. 
Nous avons done traduit, sous une forme abstraite, un mot ou une 
expression recherchee. Ce langage est puissant mais egalement tres 
complexe. Nous n'en ferons pas le tour dans ce livre, nous vous aiderons 
seulement a comprendre certains principes et vous en proposerons les 
expressions les plus courantes. 

La methode 

Vu le comportement tres complexe des moteurs d'expressions rationnel- 
les, l'approche ne peut etre qu'empirique. Avec un peu d'habitude, la 
solution sera trouvee plus rapidement. Dans chaque recherche, vous avez 
un objectif. Vous voulez verifier, extraire ou remplacer une chaine de 
caracteres, e'est le centre de votre strategie. II faut aider le moteur a 
trouver des reperes autour de cet objectif. Si vous recherchez www, vous 
savez qu'il est entoure de http: // et d'un point. Plus vous caracterisez 
votre objectif, plus vous aurez de chances de le trouver. Le moteur a 
quelques « defauts ». Ainsi ne s'arretera-t-il pas au premier motif trouve 
mais ira jusqu'a la fin de la cible. C'est ce qu'on appelle l'avidite. Elle 
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peut pousser le moteur a etre trap perfectionniste dans sa recherche et a ne 
pas trouver ce qu'il a "sous les yeux" car il cherche toujours un motif 
complementaire. 



Tab. 8.3: Debut et fin de ligne 


Signe 


Description 




Debut de ligne, sauf quand le signe se trouve a I'interieur de 
crochets. II signifie alors line negation. 



$ Fin de ligne 



Les parentheses permettent de delimiter des sous-motifs qui seront stockes 
dans un tableau, dans le cas d'une recherche ou dans les variables 
speciales \\0 pour la totalite du motif, \\ 1 pour la premiere parenthese. . . 

En ce qui concerne les expressions rationnelles, PHP a herite du module 
du langage Perl et des normes POSIX. Nous allons etudier un cas assez 
simple pour commencer puis verrons la syntaxe et approfondirons. 
Auparavant, nous ferons le panorama des fonctions du langage PHP qui 
utilisent les expressions rationnelles. 

POSIX 

POSIX est une norme qui permet la portabilite sur tous les systemes. 
Voici les fonctions du langage PHP aux normes POSIX. 



Tab. 8.4 : Fonctions pour des expressions rationnelles POSIX 


Fonction 


Description 


int ereg ( string motif, 
string chaTne [, array 
tabl eau] ) 


Retourne Vrai si la chaine contient le motif. 


string ereg replace ( string 
motif, string nouveau motif, 
string chaine) 


Remplace le motif a I'interieur de la chaTne par le 
nouveau motif. 


eregi () 


Comme ereg() mais insensible a la casse 
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Tab. 8.4 : Fonctions pour des expressions rationnelles POSIX 


Fonction 


Description 


eregi replace() 


Comme ereg replace() mais insensible a la 
casse 


array split ( string 
motif separateur, string 
chaTne [, int limite]) 


Decoupe la chaTne en sous-chaTnes au moyen du 
separateur. 


string sql regcase ( string 
chaTne) 


Cree une expression rationnelle insensible a la 
casse a partir de la chaTne. Pour PHP, le resultat 
sera[Pp][Hh][Pp]. 



Quelques etudes de cas 

Vous voulez savoir si vous avez des chiffres dans un texte. 

$expression="f s5dqfdsf " ; 

if (ereg( 1 [0-9] ' ,$expression)) { 

} 

L' expression est vraie car elle contient au moins un chiffre. Ici [0-9] 
represente la classe chiffres qui pourrait aussi etre exprimee avec 
l'expression [[:digit:]]. Le signe "-"represente l'intervalle. II s'agit 
de tous les chiffres inclus dans l'intervalle 0 a 9. 

Si vous voulez rechercher un chiffre particulier : 

■ ereg( '0' ,$expression) recherche le chiffre 0. 

■ ereg( ' [09] ' ,$expression) recherche les chiffres 0 ou 9 dans 
l'expression. 

Si vous souhaitez que ces chiffres ne soient pas dans l'expression, 
employez le caractere A dans les crochets. Si vous l'employez en dehors 
des crochets, il n'a plus meme sens. 

ereg( ' [^0] ' ,$expression) sera vrai si le chiffre 0 n'est pas dans 
l'expression. 

Rappelez-vous : 

if ! ereg (' [^0-9] ' ,$table){ 
Stable. =' 1 ; 
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Nous verifiions que le nom de la table creee a partir d'un nom de fichier 
ne contient pas uniquement des chiffres. Si c'etait le cas, nous aurions 
ajoute un blanc souligne. 

$contenu_txt =ereg_repl ace(" ([[: space:]] |~) [A-zO-9] {1,2} [[: space:]] ", 
" " ,$contenu_txt) ; 

Dans cette expression, nous cherchons un mot (entoure d'espaces) qui 
contienne de une a deux lettres. ([[:space:]] |^) [A-z0-9]{2,} 
signifie qu'on recherche au moins deux caracteres alphanumeriques places 
en debut de chaine ou apres un espace. 

II reste un caractere que nous n'avons pas vu, c'est le caractere point (.)• 
II remplace n'importe quel nombre et type de caractere. Si vous voulez 
representer un vrai point, il vous faudra utiliser un caractere d'echappe- 
ment (\.)- 

Voici les expressions POSIX et leurs equivalents. 



Tab. 8.5 : Les normes POSIX 



Sequence 


Equivalent 


Description 


[[:alnum:]] 


[A-Za-zO-9] 


Caracteres alphanumeriques 


[[:alpha:]] 


[A-Za-z] 


Caracteres alphabetiques 


[[:d1g1t:]] 


[0-9] 


Caracteres numeriques 


[[:blank:]] 


[\x09] 


Espaces ou tabulations 


[[:lower:]] 


[a-z] 


Caracteres en bas de casse 


[[:upper:]] 


[A-Z] 


Caracteres en capitales 


[ [ : xdi git:]] 


[0-9a-fA-F] 


Caracteres hexadecimaux 


[[:punct:]] 


[!-/:-@[-'{-~] 


Caracteres de ponctuation 


[[:space:]] 


[\t\v\f] 


Tout caractere d'espace 


[[:cntrl :]] 


[\xOO-\xl9\x7F] 


Caracteres de controle 


[[:graph:]] 


[!"] 


Caracteres affichables et 
imprimables 


[[:print:]] 


[~] 


Caracteres imprimables sauf 



caracteres de controle 
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Les caracteres sont dans l'ordre du tableau de caracteres ASCII. Ainsi, 
dans [a-z] , les lettres accentuees ne figurent pas. 




Les lettres accentuees 

Pour ce cas , utilisez les caracteres \x suivis du numero dans 
la table ASCII. Pour trouver si votre texte contient des lettres 
accentuees francaises, vous devez ecrire [\xl28-\xl51\153\154] , 
c'est-a-dire les caracteres 128 a 151 puis les 153 et 154. De la meme 
facon, si vous voulez le caractere litteral A , utilisez \x94. 



Pour affiner notre recherche, nous avons a notre disposition la cardinalite, 
c'est-a-dire que nous pouvons selectionner le nombre de caracteres : 

■ eregC [0-9] {1} ' ,$expression) recherche s'il existe un chiffre 
dans l'expression. 

■ eregC [0-9] {1,3} ' ,$expression) recherche s'il existe entre un et 
trois chiffres dans l'expression. 

Nous avons aussi des equivalents. 



Tab. 8.6 


Cardinalite 




Signe Equivalent 


Description 


* 


{0,} 


0 ou plus 


+ 


{i,} 


1 ou plus 



{0,1} 



Oou 1 



■ ereg( ' [0-9] + ' ,$expression) recherche s'il existe au moins un 
chiffre dans l'expression. 

En voyant le tableau precedent, vous pouvez vous interroger sur l'utilite 
de l'etoile *. Ce signe renvoie en effet Vrai que le caractere existe ou 
n'existe pas. En fait, il s'emploie dans des expressions plus complexes. 

■ ereg( ' [0-9]*' ,$expression) recherche s'il existe au moins zero 
chiffre dans l'expression. 
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Vous pouvez par exemple rechercher un mot qui peut etre au pluriel ou au 
singulier. !ereg( ' regul ieres*' , $expression) sera vrai si le mot 
"reguliere" ou "regulieres" n'existe pas dans l'expression ;=). 

Si vous recherchez le mot evenement qui peut aussi s'ecrire evenement, 
vous emploierez l'expression ereg ( ' eve | enement* ' , $expression). 
Le signe | signifie ou. Cette expression est equivalente a : 
eregCevteeJneinent* 1 , $expression). 

Vous pouvez aussi faire porter la precision sur plusieurs caracteres. Ainsi, 
vous cherchez un mot masculin ou feminin comme docteur ou docteresse 
' docteu*r (esse) * ' . Le probleme est que docteuresse fonctionne aussi. 
'docteu*r' sera mieux adapte. Nous verrons un peu plus loin les 
problemes d'avidite qui font que des que l'une des expressions est 
trouvee, le moteur retourne Vrai sans aller jusqu'a la fin de l'expression. 

Reprenons les fonctions date_nombre() et nombre_date() avec les 
expressions rationnelles. Le code sera plus court et l'execution plus 
rapide : 

<? 

function nombre_date($cettedate) { 

$1 adate=$cettedate; 

$1 ongueur=strl en($l adate) ; 

if ($longueur==8) { 

$ladate=ereg_replace(" (" [0-9] {4}) ( [0-9] {2} ) ( [0-9] {2}) " , "W3/W2/W1" , 

$1 adate) ; 

} 

elseif ($1 ongueur==12) { 

$ladate=ereg_replace(" (^[0-9] {4}) ( [0-9] {2} )( [0-9] {2}) ( [0-9] {2}) 11 , 

"\\3/\\2/\\l \\4h\\5", $1 adate); 

} 

elseif ($1 ongueur==14) { 

$ladate=ereg_replace(" ("[0-9] {4}) ([0-9] {2}) ([0-9] {2}) 
([0-9]{2})([0-9]{2})","\\3/\\2/\\l \\4h\\5mn\\6" , $ladate); 
} 

if ($1 ongueur>8) { 

$heure= (int)substr($ladate,8,2) ; 

$minutes= substr($l adate, 10,2) ; 

$ladate.=" ${heure}h ${mi nutesjmn" ; 

if ($longueur>12) { 

$secondes= substr($ladate,12,2) ; 

$ladate.=" $secondes"; 

} 

} 
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return $ladate; 

} 

Nous verifions dans cette fonction la longueur de la date et, selon la taille, 
en extrayons aussi l'heure, les minutes et les secondes. Les jours, mois et 
heure sont forces en i nt (typees) car nous voulons eviter qu'ils commen- 
cent par un 0. 

<? 

function date_nombre($cettedate) { 

$1 adate=$cettedate; 

$1 adate=expl ode( ' / 1 ,$1 adate) ; 

$jour=$ladate[0] ; 

$moi s=$l adate[l] ; 

$an=$ladate[2] ; 

$longueur=strlen($an) ; 

if ($longueur==6) { 

if ($an>date("y")){ 

$an= ' 19 1 .$an; 

} 

else { 

$an= ' 20 1 .$an; 

} 
} 

$longueur=strlen($mois) ; 
if ($longueur==l) { 
$mois='0' .$mois; 

} 

$ladate=$an.$mois.$jour; 
return $1 adate; 

} 

?> 

Nous voyons cette meme recherche de motif a la maniere de Perl dans les 
pages qui suivent. 

Les fonctions compatibles Perl 

L'interet majeur de ces fonctions compatibles avec le langage Perl est que 
vous pouvez utiliser des options utiles, voire indispensables. 
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Tab. 8.7 : Fonctions pour des expressions rationnelles compatibles Perl 


Fonction 


Description 


array preg grep ( 
string motif, array 
tabl eau) 


Retourne dans un tableau les elements extraits d'un autre 
tableau Qui correspondent au motif. 


int preg match ( 
string motif, string 
chaine [, array 
tabl eau] ) 


Retourne Vrai si la chaine contient le motif donne et 
emplit le tableau eventuel avec les correspondances. 


int preg match all ( 
string motif, string 
chaine [, array 
tabl eau] ) 


Renvoie dans un tableau toutes les occurrences du motif 
dans la chaine. Un ordre peut etre envoye par le 
parametre optionnel. 


mixed preg replace ( 
mixed motif, mixed 
nouveau motif, mixed 
chaine [, int 
1 imite] ) 


Remplace le motif par le nouveau motif dans la chame et 
retourne la nouvelle chaine. Si la limite est posee, le 
nombre de remplacements sera limite. 


array preg spl it ( 
string motif, string 
chaine [, int 
1 imite] ) 


Decoupe une chaine en utilisant le motif comme 
separateur. 



Un certain nombre d'options affinent encore la recherche. Ces expressions 
rationnelles compatibles avec le langage Perl sont caracterisees par des 
contenants qui sont generalement des barres obliques ou peuvent etre # ou 
%... Tout caractere non utilise dans le motif recherche peut etre mis a 
contribution. Reprenons l'exemple de l'extraction du nom du fichier dans 
le mini-forum : 

preg_match("r/.*/(.*)\. [A-zO-9] {3,4}$#", $_SERVER[ 1 PHP_SELF ' ] , $tableau) ; 

Ici, les caracteres de limite d'expression sont #. Le premier caractere 
A designe un debut de ligne alors qu'il signifierait une negation dans des 
crochets. Le dernier caractere $ signifie une fin de ligne. Nous avons 
utilise # et non /, deja utilise dans le motif recherche : un chemin avec des 
repertoires. 
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Ensuite, le premier caractere est une barre oblique presente au debut de la 
valeur de $_SERVER[' PHP_SELF'] qui affiche le chemin a partir du 
repertoire web. Nous avons .*. Le point represente n'importe quel 
caractere et n'importe quel nombre de caracteres, il peut s'agir de 
plusieurs repertoires ou d'aucun. En suivant l'expression, nous trouvons 
une autre barre oblique. Si nous regardons plus loin, nous trouvons le 
schema du fichier avec le point et les trois ou quatre caracteres qui 
caracterisent son format appeles son extension {.doc, .jpg, .php, .html, 
.php3...). Ce que nous voulons recuperer est le mot entre la derniere barre 
oblique et le point. Nous caracterisons l'extension, le point et la barre 
oblique pour delimiter le motif qui represente notre objectif. Cet objectif 
est represente par ( . *) . 



Tab. 8.8 : Les caracteres d'echappement dans les expressions rationnelles 


Caractere 


Description 


\w 


Caractere de mot. Les caracteres de mot sont les 
alphanumeriques et le blanc souligne ( ). 


\W 


Caractere de non mot 


\b 


Limite de mot (entre le \W et le \w) 


\B 


Limite de non mot 


\d 


Caractere numerique 


\D 


Caractere non numerique 


\n 


Caractere de nouvelle ligne 


\s 


Caractere d'espace 


\S 


Tout caractere sauf un caractere d'espace 



Creons un systeme de fichier tres simple. Imaginons que vous ayez un 
repertoire oil vous voulez placer tous vos fichiers sans fioritures. Ce qui 
vous interesse et interesse vos visiteurs, c'est seulement le contenu des 
fichiers. Vous avez peu de temps et acceptez de placer votre texte dans un 
modele ou gabarit mais il vous pese d'ajouter les liens de navigation a 
chaque nouveau fichier. Nous allons done creer un fichier qui sera a 
l'ecoute de votre repertoire. Dans un premier temps, ce fichier ira chercher 
la liste des fichiers dans une table. Chaque fichier sera affiche selon ses 
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caracteristiques : nom, titre, date de creation, et dans l'ordre de date, 
c'est-a-dire que les plus recents seront en haut de la liste. 

II subsiste une objection, car certains fichiers seront perennes et d'autres 
circonstanciels. Pour differencier les deux types de fichier, nous appelle- 
rons les fichiers d'actualite par un nom de date de type AAAAMMJJ. Plutot 
que de mettre la date du jour, nous mettrons la date de peremption. Ainsi 
il sera simple de les archiver des que la date sera depassee. 

Rentrons dans un tableau les types de fichiers qui seront affiches. Ainsi, il 
est inutile d'afficher les fichiers .gif ou .jpg. 

<? 

incl ude_once " . . /commun/fonctions. inc.php" ; 

incl ude_once RACINE. "/commun/connexi on. inc.php" ; 

$extensions=array ('htm 1 , 'html', 'php', 'php3'); 

/*si $archi est egale a 0 c'est un fichier normal, si c'est 1, 
cette application liste les fichiers archives. Ce sera le meme 
fichier enregistre sous un autre nom comme archives. php*/ 

$archi='0' ; 

?> 

<!D0CTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transi ti onal //EN"> 

<html> 

<head> 

<title>La page web</title> 
</head> 

<body bgcolor="#FFFFFF" text="#000000" 1 ink="#0033FF" vl i nk="#990000" 

alink="#FF0000"> 
<table width="90%" border="0" eel 1 spaci ng="2" cellpadding="2"> 
<tr> 
<td colspan="2"> 
<div al ign="center"xb> 
<font face="Arial , Helvetica, sans-serif" size="3"> 
LES PAGES WEB</fontx/bx/div> 
</td> 
</tr> 
<tr> 

<td colspan="2" al ign="l eft"> 
<table width="50%"> 

<? 

/*Si vous mettez le fichier dans le repertoire, laissez ces 3 lignes 
sinon utilisez la variable $rep en dessous qui est inactive (mise 
sous commentai re)*/ 

preg_match("# A (.*)/(.*)(\.)([A-zO-9]{3,4})$#", 
$SCRIPT_FILENAME, $tableau); 
$rep=$tableau[l] ; 

/*nous stockons le nom du fichier pour qu'il ne soit pas mis 
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dans la base*/ 
$fichier_courant=$tableau[2] .$tableau[3] .$tableau[4] ; 
//$rep = " . ./BonsVi vants" ; 
///AFFICHAGE DES DONNEES////// 

/*ici nous changeons la valeur selon que le fichier soit destine 
a des archives ou a des fichiers perennes*/ 

$sql="select * from fichiers where archi ve= 1 $archi ' OR archive='' 
ORDER BY moment DESC"; 
$resultat = @mysql_query ($sql , $id_link); 
$nombre = @mysql_num_rows ($resul tat) ; 
if ($nombre>0){ 

whi 1 e($rang=mysql_f etch_array ($resul tat) ) { 
$nom_f i chi er=$rang [ 1 nom_f i chi er ' ] ; 
$titre=$rang['titre'] ; 
$archi ve=$rang[ ' archi ve '] ; 
$momen t=$ rang [ 'moment '] ; 
$moment_crea=date ( " j /n/Y" , $moment) ; 

echo "<trxtdxA HREF=\"$nom_fichier\" target=\"_blank\">$titre</a> 

</tdxtdxi>$moment_crea</ix/tdx/tr>\n" ; 

} 

} 

else { 

echo "<tdxtd col span=2>Aucun fichier n'est pour 1 'instant disponible. 
Revenez bientot sur cette page.</tdx/tr>" ; 

} 

///fin de l'affichage//////////// 

////fourniture de la base de donnees////// 

if (!$archi){ 

$aujourdhui=date("Ymd") ; 

//cherchons la date la plus recente/// 

$sql="select MAX(moment) as date_l imi te from fichiers"; 

$resultat = @mysql_query ($sql , $id_link); 

$nombre = @mysql_num_rows ($resul tat) ; 

if ($nombre==l) { 

//la date dans la base est entree en TIMESTAMP UNIX////// 



TIMESTAMP 

Le TIMESTAMP Unix est le nombre de secondes depuis le 1 er 
janvier 1970 alors que le TIMESTAMP MySQL est un nombre de 
type AAAAMMJJHHMMSS. 



$rang=mysql_fetch_array ($resul tat) ; 
$date_l imi te=$rang[ ' date_l imi te '] ; 
$maintenant=date("Ymd" ,$date_l imite) ; 
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} 

el se { 

$date_limite=time()- (60*60*24*365*20); 
$sql="CREATE TABLE fichiers ( 

clef int(ll) NOT NULL auto_increment, 

nom_fichier varchar(60) NOT NULL default ", 

titre varchar(lOO) NOT NULL default ", 

archive char(l) NOT NULL default '1', 

moment bigint(20) NOT NULL default '0', 

PRIMARY KEY (clef), 

UNIQUE KEY clef (clef), 

KEY clef_2 (clef) 

)"; 

@mysql_query ($sql , $i d_l ink) ; 

} 

Passons en revue maintenant tous les fichiers du repertoire. Un test verifie 
que le fichier n'est pas un repertoire ou ce fichier-ci : 

$dir = opendi r($rep) ; 
while ($f = readdir($dir)) { 
if (!is_dir($f) && $f !=$f i chier_courant) { 
/*CHERCHER LE TITRE DU FICHIER DANS LES BALISES HTML 
<TITRE> ET </TITRE>*/ 
$fd_txt=fopen($f,'r'); 

$contenu_txt = fread ($fd_txt, filesize ($f)); 
fclose($fd_txt) ; 

preg_match ("/(<(ti tl e) [">] *>)+?((. | \n) *?) (<\/\\2>) /i " , 

$contenu_txt, $trouvai 1 1 es) ; 
/*le modificateur i apres le dernier delimiteur / dans 

1 'expression permet de rendre le motif insensible a la casse*/ 
$titre=$trouvail les [3] ; 
$titre=ereg_repl ace("\n" , "", $titre); 

Le moment a ete mis sous cette forme dans le fichier : 
<!-- <date>20/02/2003</date> ->. Notez qu'il est en commentaire 
dans le HTML, done non affiche. Si ce code existe dans le fichier, cette 
date sera prise en compte, sinon ce sera la date de derniere modification 
du fichier. 

preg_match ("/ (<(date) ["*>] *>)+?((. | \n) *?) (<\/\\2>) /i " , 
$contenu_txt, $trouvai 1 1 es) ; 
$ce_moment=$trouvai 1 1 es [3] ; 
if (strl en($ce_moment) ) { 

/* ce moment a ete mis sous cette forme dans le fichier 
<date>20/02/2003</date> */ 
$moments=spl i t ( ' /' ,$ce_moment) ; 



312 • Double Poche PHP & MySQL 



Les expressions rationnelles 



$moment=mktime(0, 0, 0, $moments[l] , $moments [0] , $moments [2] ) ; 
} 

///////////////////////////////////////////// 

//donne la date du dernier changement dans le fichier// 

$moment=f i 1 ectime($f ) ; 

$temps_f ichier=date("Ymd" ,$moment) ; 

preg_match("#"(.*)\. ([A-zO-9] {3,4})$#", $f, $tableau); 

$nom=$tableau[l] ; 

$extension=$tableau[2] ; 

Comparons la derniere date oil cette application a opere pour entrer les 
fichiers dans la base et celle du fichier. Si celle du fichier est plus recente, 
ses caracteristiques sont inserees dans la base. 

if (ereg(" [0-9] {8} " ,$nom) && $nom>$aujourdhui && $moment>$date_limite 
&& in_array ($extension, $extensions)) { 

$sql="insert into fichiers (nom_fichier, titre, archive, moment) 
VALUES ('$f', '$titre', '0', ' $moment 1 ) " ; 
@mysql_query ($sql , $id_link); 

} 

elseif (in_array ($extension, $extensions) && $moment>$date_l imi te) { 
$sql="insert into fichiers (nom_fichier, titre, archive, moment) 
VALUES ('$f', '$titre', '0', 1 $moment 1 ) " ; 
@mysql_query ($sq1 , $i d_l ink) ; 

} 
} 

} 

closedir($dir) ; 

} 

///fin archi ==0 
?> 

</tabl ex/tdx/tr> 
</tabl e> 

Si le fichier possede un nom de type 20020601, ce nom sera compare a la 
date du jour. S'il est moins recent, la valeur d'archive sera mise sur 1. Ceci 
est interessant pour des fichiers d'actualite qui deviendront obsoletes apres 
une certaine date et que nous archivons. 



Listing 8.2 : Ecoute fichiers : table_ecoute.ph[. 

<? 

if (!$archi){ 

$sql="select * from fichiers where archive='0' OR archive='' 
$resultat = @mysql_query ($sql , $id_link); 
whi 1 e($rang=mysql_f etch_array ($resul tat) ) { 
$nom f ichi er=$rang[ 1 nom fichier']; 
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$clef==$rang['clef '] ; 

preg_match("fr(.*)\. ([A-zO-9] {3,4})$#", $nom_fichier, $tableau); 
$nom=$tableau[l] ; 

if (ereg("[0-9]{8}",$nom) && $nom<$aujourdhui ) { 
$sql =" update fichiers set archive='l' where 
nom_fichier='$nom_fichier' "; 
@mysql_query ($sql , $id_link); 

} 
} 
} 

?> 

<P> </P> 

</body> 

</html> 

Nous allons chercher la date de dernier changement. Si vous vous 
contentez de changer votre fichier de repertoire, cette date ne sera pas 
modifiee. Pour la modifier, il faut faire un changement dans le fichier. Si 
une fois que vous l'avez entre, vous modifiez ce fichier, il apparaitra deux 
fois dans la liste avec deux dates differentes. Avant de faire cette 
manipulation, enlevez son entree dans la base ou mettez un fichier plus 
recent dans le repertoire juste avant, cela permettra de repousser la date 
limite. Votre fichier plus ancien passera le controle sans probleme. 



La page web - Netscape 6 



□In® 



, Fichier Edition Afficher Rechercher Aller a Signets Taches fiide 

It 



Recharger rrfu □ " R« Imt< hor 
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Sans titre 


::5 :oo: 




Le menu du jour 


12/5/2002 
11/5/2002 




Sans titre 


11/5/2002 




Phi- tarde 


11/5/2002 




Les liens du Club 
des Bons Yivants 


11/5/2002 




Votre nouvel email 


7/5/2002 




envoi en nombre 


5/5/2002 




Le sondage des 
Bons Wants 


24/4/2002 




Sans titre 


23/4/2002 




□ E3 & t&m 


Document : Termine (0... 





▲ Figure 8.3 : Une table d'ecoute : attention de mettre un titre pour chaque 
fichier 
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Nous preferons afficher une autre date pour des raisons d'actualite. Nous 
recuperons la date que nous avons ajoutee dans le fichier lui-meme en 
l'encadrant de balises de notre invention : <date>21/09/1999</date>. 
Nous prenons soin de l'inserer dans un marqueur de commentaire HTML 
pour qu'il ne soit pas affiche. Ici, l'expression rationnelle joue le role d'un 
analyseur XML. L'expression rationnelle utilisee par les fonctions com- 
patibles Perl utilise des delimiteurs et des modificateurs. Ici, le modifica- 
teur i rend l'expression insensible a la casse. 




Les motifs sur plusieurs lignes 

Le caractere point represents n'importe quel caractere, sauf 
les caracteres de nouvelle ligne \n. Pour que ce caractere soit 
assimile au point, il faut utiliser le modificateur s. 



Ce systeme de fichiers peut etre complexifie a l'echelle d'un site, en 
prenant soin de signaler les repertoires prives ou les repertoires destines a 
classer les images du site pour les proteger. Vous pouvez aussi les afficher, 
comme nous l'avons fait pour l'annuaire de liens. 



Tab. 8.9 : Modificateurs 


Modificateur 


Description 


A 


Cherche le motif seulement au debut de la cible. 


E 


Cherche le motif seulement a la fin de la cible. Le caractere est pris 
comme caractere. 


U 


S'arrete des que le premier motif qui satisfait a la recherche est trouve. 


i 


Le motif est insensible a la casse. 


m 


Permet d'utiliser les ancrages A et $ pour des debuts ou des fin de 
ligne. 


s 


Force le moteur a considerer le caractere \n comme assimile dans le 
caractere "point". 


X 


Permet de placer des espaces dans votre expression dont le moteur ne 
tiendra pas compte. Sert a rendre vos expressions plus lisibles. 
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Nous avons vu ce qui concernait les quantificateurs dans la partie POSIX. 
II est possible avec les expressions rationnelles compatibles Perl d'utiliser 
des quantificateurs non avides. Cela signifie qu'ils ne completent pas la 
recherche du motif une fois que le motif satisfait les criteres. lis ne 
s'arretent pas au premier motif mais ils n'essaient pas non plus a 
completer indefiniment le motif trouve par d'autres caracteres possibles. 



Tab. 8.10: Quantificateurs pour une recherche minimale 


Non avide 


Nombre de fois 


*? 


0, 1 ou plus 


+? 


1 ou plus 


?? 


0 ou 1 


{min, max}? 


Au minimum min et au maximum max 


{min, }? 


Au moins min 


{nombre}? 


Exactement nombre 



Quelques etudes de cas 

Au cours de ces pages, nous avons utilise des expressions rationnelles 
compatibles Perl sans les expliquer. Reprenons-les : 



preg_match("r-(.*)\.([A-zO-9]{3,4})$#" 


, $f, $tableau); 


$nom=$tableau[l] ; 




$extension=$tableau[2] ; 





Dans cette expression, les delimiteurs sont #. Nous recherchons un motif 
qui tient sur une ligne, ce qui simplifie la recherche car cela evite l'avidite 
du moteur. Sur des expressions avides, le moteur ne se contente pas de 
trouver le motif, il a la tentation d'aller le chercher toujours plus loin. Le 
point precede d'un signe d'echappement est un vrai point et non un 
caractere joker. Ensuite, 1' extension du fichier peut contenir des lettres 
mais aussi des chiffres, au nombre de trois ou quatre. 

$heure=preg_replace(7\d{8}(\d{2})(\d{2})\d{2}/","\\l",$datedujour); 



31 B • Double Poche PHP & MySQL 



Les expressions rationnelles 



Cet exemple prend une date de type AAAAMMJJHHMMSS dont on extrait 
l'heure, c'est-a-dire la premiere parenthese. Le motif est compose de huit 
chiffres suivis d'une serie de trois fois deux chiffres. 



L'atome 

L'atome est la plus petite particule de la matiere. En grec, 
atomos signifie ce qui ne peut etre divise. 



$contenu_txt=@preg_repl ace ("# (\s) ((\S) +?((?)+? (\S)+?(\.)+? 
[A-z0-9_-]{2,3})(((\.)*<br>\s)|((\.)* 
<p>\s)|((\.)*</p>\s)|((\.)*\s))#1'. 
"\\1<A HREF=\"mailto:\\2\">\\2</a>\\7", $contenu_txt) ; 

Ce motif est celui d'une adresse e-mail a laquelle nous ajoutons un lien 
mail to. La seule obligation concernant cette adresse est qu'elle soit 
encadree d'espaces ou de balises de fin de ligne. Decomposons mainte- 
nant cette expression dans un tableau. 



Tab. 8.11 : Analyse de la premiere partie de I'expression : 
("#(\s)((\S)+?(@)+?(\S)+?^+?[A-zO-9_-]{2,3}) 


Atome 


Description 


(\s) 


Espace 


(\S)+7 


Au moins un non espace (un caractere different d'un espace) 


(§)+? 


Au moins un arobace 


(\S)+? 


Au moins un non espace. Juste apres I'arobace, le moteur 
continuera sa route aussi loin qu'il ne rencontrera pas d'espace 
et jusqu'au point qui suit. 


(\.)+? 


Au moins un point 


[A-z0-9_-]{2,3}) 


Apres le point entre deux et trois caracteres alphanumeriques ou 
blanc souligne ou tiret 
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Tab. 8.12 : Analyse de la seconde partie de I'expression : 

(^)*<br>\s)|^)*<p>\s)|(M*<yp>\s)|(M*\s)) 


Atome 


Description 


((\.)*<br>\s) 


Point eventuel suivi d'une balise <br> et un espace 
comme une fin de ligne 


((\.)*<p>\s) 


Idem avec la balise <p> 


((\.)*</p>\s) 


Idem avec la balise </p> 


((\.)*\s) 


Idem sans balise 



Ces atomes sont relies par le signe | (ou). Ainsi, les signes qui suivent 
la partie interessante, l'adresse e-mail, sont une fin de ligne ou un espace 
blanc. 

Nous pouvons ameliorer I'expression en enlevant la deuxieme ligne de 
cette deuxieme partie et en modifiant la ligne suivante : 

((\.)*</*p>\s) 

Ainsi, la ligne oblique peut etre ou non presente. 

A la fin du premier membre de I'expression qui consiste en ces deux 
parties, nous avons ajoute le modificateur i apres le delimiteur pour que 
I'expression soit insensible a la casse. 

"\\1<A HREF=\"mailto:\\2\">\\2</a>\\7" 

Nous utilisons dans le deuxieme membre de I'expression, la recursivite 
avec les deux barres obliques inversee suivies d'un chiffre qui correspond 
a la place des parentheses de la gauche vers la droite et du general au 
particulier. La parenthese 0 est 1' ensemble du motif, la parenthese 1 est ici 
un espace et la 2, l'adresse e-mail. Nous terminons par la septieme 
parenthese qui est 1' espace ou la fin de ligne terminant le motif : 

pregjnatch ( "/ (<(ti tl e) [">] *>)+?((. | \n)*?) (<\/\\2>) /i " , 
$contenu_txt, $trouvai 1 1 es) ; 
$titre.= " " .$trouvai 1 1 es[3] ; 
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Ici, nous cherchons a capturer le contenu des balises <title>et 
</title>, en incluant l'eventualite qu'elles puissent chevaucher une 
ligne. L'atome que vous rencontrez au milieu ( ( . | \n) *? ) est ce que Ton 
cherche vraiment, c'est-a-dire tous les caracteres compris entre les deux 
balises. 



Le caractere point 

Le caractere point ne comprend pas le caractere de nouvelle 
ligne. 



Le premier atome est la premiere balise. II est compose du premier 
chevron suivi de ti tl e puis d'un motif assez obscur : [ A >] *, present pour 
eviter que le moteur soit trop gourmand mais qu'il exige malgre tout la 
presence du chevron fermant. C'est le genre d'expression que Ton trouve 
a la suite de tests et d' approximations. Le motif finit avec la repetition de 
title (\\2) encadre par des chevrons. Le tout est modifie par i qui le 
rend insensible a la casse. Etre un orfevre en expressions rationnelles 
demande de l'intuition et de l'experience. Ce n'est pas une science exacte 
mais un outil indispensable aux possibilites encore largement inexplorees. 

8.3 Conclusion 

Les expressions rationnelles demandent beaucoup de pratique car chaque 
probleme pose est unique. La construction d'une expression part d'une 
base de caracteres puis, par approximations, cherche a atteindre la 
precision requise. Cette precision se nomme la granularite. L'objectif 
etant d' atteindre la granularite la plus appropriee. Si elle est trop fine, vous 
ne trouverez rien. Si elle est trop grossiere, vous aurez trop de resultats. 
Vous le voyez dans les moteurs de recherche. En etant trop precis, vous 
n'obtenez aucun resultat. 
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vous 




Parsez-vous XML ? 



Le XML est arrive a point pour repondre a des besoins de communication 
entre les applications avec un langage format texte. II repond, en outre, a 
ce vieux reve de clairement separer le contenu de la presentation. Avec le 
XML, la presentation et le contenu deviennent reutilisables dans differents 
contextes (Web, archives, flux, telephonie mobile...). 

L'objet de ce livre est non pas de vous donner une etude exhaustive du 
XML en general mais de vous permettre de creer des applications utiles ; 
vous pourrez ainsi approfondir le sujet avec une bonne base de compre- 
hension. 

PHP dispose de modules dedies au XML avec les fonctions adequates 
pour repondre a toutes les circonstances. 



Le XML est un langage de balises comme le HTML. Ces deux langages 
sont issus d'un ancetre commun, le SGML. Le SGML etait trop complexe 
pour se repandre, alors est ne le HTML, qui en est une simplification et qui 
caracterise aussi bien une forme (<font>, <p>, <b>...) qu'un contenu 
(<ti tl exscri pt>. . . ), utilisant la navigation par hyperliens. Le HTML 
a fait exploser la production de pages sur lTnternet grace a sa simplicite 
et a la tolerance des navigateurs quant a la grammaire des balises pour la 
restitution de ces pages. Face a la proliferation des informations, voire a 
leur saturation, il a fallu trouver une facon de caracteriser leur contenu 
pour une communication plus pointue, et c'est la qu'intervient le XML. La 
plupart du temps, 1' application XML se compose de trois fichiers : le 
fichier DTD ( . dtd), une feuille XSLT( . xsl ) et le fichier XML proprement 
dit (.xml). 




: Avant de creer vos pages XML sur votre serveur web... 

Verifiez avec la fonction phpinfoQ si vous disposez du XML 
et du module Sablotron pour le XSLT. 



9.1 Un peu d'histoire... 



322 • Double Poche PHP & MySQL 



Le fichier XML 



9.2 Le fichier XML 

Le fichier XML est compose de deux parties complementaires. 

L'espace de nommage 

Vous commencez par declarer la version XML utilisee pour stacker les 
donnees ainsi que le type d'encodage : 

<?xml version="1.0" encoding="IS0-8859-l"?> 

Ce type d'encodage vous permet de rendre correctement les caracteres 
propres a l'Europe occidentale. 

Sur la ligne en dessous, vous declarez la DTD : 
<!D0CTYPE nomDTD SYSTEM "nom.dtd"> 

Vous nommez la DTD et indiquez le chemin vers le fichier ou FURL. 
Ensuite, vous declarez le fichier XSLT, qui mettra le fichier XML en forme : 

<?xml -stylesheet type="text/xsl " href="adherents.xsl "?> 

Les elements et les attributs 

Le fichier XML est forme de balises comme l'exemple ci-dessous : 
<fiche> 

<img src="jeandupond. jpg"/> 

<prenom>Jean<prenom> 

<nom>Dupont</nom> 

<adresse>16, rue du Pont Loui s-Phi 1 i ppe</adresse> 
<codepostal>75004</codepostal> 
<vi 1 1 e>Pari s</vi 1 1 e> 
</f i che> 

Chaque balise ouvrante renvoie a une balise fermante rigoureusement 
positionnee pour encadrer symetriquement des donnees, excepte la balise 
img, qui se termine ici par / du fait que c'est un element isole. Les balises 
sont nominees des elements tandis que leur ou leurs proprietes comme la 



Double Poche PHP & MySQL • 323 



9 Parsez-vous XML ? 



propriete src de l'element img sont appelees des attributs. Ce que contient 
l'element est du texte. 

Le fichier XML doit avoir la bonne forme. Si vous choisissez des capitales 
pour nommer les balises, vous devrez vous y tenir, qu'elles soient 
ouvrantes ou fermantes. Vous allez done creer un fichier de DTD dans 
lequel vous consignerez les regies que vous appliquerez a vos balises. II 
servira a valider votre fichier et a reperer les erreurs de syntaxe. Vous 
pourriez ainsi decider que telle balise est obligatoirement a l'interieur de 
telle autre balise... 





XML 




XHTML 








resultat 








XSLT 




XSLT 


construction des noeuds 




mise en forme 



A Figure 9.1 : Processus XSLT 



Un fichier XML est un fichier brut de donnees, sans aucune presentation 
mais ponctue de balises ; il sera done accompagne d'un fichier XSLT. Ce 
fichier de presentation est parcouru et interprete par une application 
serveur qui va fusionner les fichiers pour fabriquer une page resultat qui 
sera soit un vrai fichier, soit l'ecran par defaut. Le langage XSLT est 
deconcertant pour tout programmeur forme aux langages proceduraux ou 
a objets. II est fonde sur la creation de regies de modele {template) a partir 
du fichier source. C'est sur l'arbre resultat que les transformations se font 
pour presenter les donnees d'une maniere lisible et agreable pour tout un 
chacun. 

Le fichier XML est traite (parsed) par un analyseur XML qui est par 
defaut le module Expat. Ce fichier correspond au contenu de la page. C'est 
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ce document qui sera modifie dans le cadre d'une mise a jour. Comme les 
balises sont explicites et le contenu, ecrit sans codage, n'importe quel 
utilisateur a qui on a enseigne deux ou trois regies saura modifier ce type 
de fichier sans dommages. 



Tab. 9.1 : Codage des caracteres dans un fichier XML 



Caractere 


Codage 


Statut 


& 


& 


Obligatoire 


< 


< 


Obligatoire 


> 


> 


Obligatoire 




&apos ; 


A I'interieur d'un attribut delimite par des 
apostrophes 




" 


A I'interieur d'un attribut delimite par des 
guillemets 



Quelques regies : 

■ Les balises doivent etre rigoureusement de la meme casse, generale- 
ment en minuscules. 

■ Toute balise ouvrante doit etre accompagnee par une balise fermante. 

■ Le nom d'une balise ou d'un attribut doit debuter par une lettre ou un 
souligne _ suivi eventuellement par plusieurs lettres, chiffres, points, 
tirets ou soulignes. 

■ Une balise sans contenu sera finie par />, par exemple <br/> 
ou <br />. 

■ Les attributs sont entre guillemets ou entre apostrophes, par exemple 
<page numero="l">. 

■ Les balises encadrant differentes entites ne peuvent se chevaucher, 
elles doivent s'emboiter ou se suivre. 

■ Les caracteres guillemet sont codes quand ils appartiennent a un 
attribut delimite par des guillemets. 

■ Les caracteres apostrophe sont codes quand ils appartiennent a un 
attribut delimite par des apostrophes. 

■ Les noms de balise ou d' attribut ne peuvent contenir d'espace. 
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■ Les balises ou les attributs ne peuvent avoir un nom qui commence par 
xml ou XML ou Xml ... 

Comme auteur d'un fichier XML, vous nommez vous-meme les differen- 
tes balises afin que le sens du contenu soit explicite pour un utilisateur : 

<titre>Php & MySQL en 1 igne<sous-titre>L'essentiel pour concevoir 
un site web dynamique!</sous-titre><collection 
reference="3679">e-poche</col lectionx/ti tre> 

Ce que nous venons d'enoncer est essentiel pour que le document XML 
soit dans une bonne forme ; le document, appele la DTD, qui accompagne 
ce fichier permettra de valider. 

9.3 La DTD 

La DTD est un document qui edicte les regies des entites composant le 
fichier XML, c'est-a-dire que vous allez decrire la succession et l'imbri- 
cation des elements et des attributs. 



Les differents types de declarations 

Les differents elements et attributs sont declares en decrivant leur contenu. 



Tab. 9.2 : Differentes declarations dans une DTD 


Declaration 


Explication 


<!ELEMENT titre 
(#PCDATA)> 


L'element titre contient du texte traite. 


<!ELEMENT titre (sous- 
titre, collection^ 


L'element titre contient les elements sous-titre et 
col 1 ection. 


<!ELEMENT titre (sous- 
titre, collection+)> 


L'element titre contient l'element sous-titre et une a 
plusieurs balises collection. 


<!ATTLIST collection 
reference CDATA> 


L'element col lection a comme attribut reference qui 
est de type CD ATA (texte) 
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Prenons l'exemple d'un fichier XML tire du site www.accesites.com : 

<?xml version^' 1.0' encodi ng= 1 ISO-8859-1 1 ?> 

<?xml -styl esheet type="text/xsl " href="i ndex.xsl "?> 

<!D0CTYPE index SYSTEM "index. dtd"> 

<page> 

<paragraphexgras>Vous voulez un site sans surprise, tout compris, 
realise dans de moindres delais, simple a mettre a jour en toute 
independance ? </gras> </paragraphe> 

<paragraphexorange>Nos packs sont faits pour 
vous .</orangex/paragraphe> 

<paragraphe> Beneficiez de notre <gras>savoi r-fai re</gras> dans un 
site a <gras>vos coul eurs</gras>.</paragraphe> 

<paragraphe> Vos clients et vos prospects feront une agreable visite 
sur votre espace grace a une navigation simple et 
di recte.</paragraphe> <paragraphe> Si vous desirez une presence 
encore plus personnalisee nous pouvons concevoir votre site 
<gras>"sur mesure"</gras> sur simple devis gratuit.</paragraphe> 

<paragraphe>Quel que soit votre choix, un grand nombre 
d'<gras>options</gras> et de services adaptes a vos besoins, sont 
a votre disposition.</paragraphe> 

</page> 

Vous avez ici des balises imbriquees. Elles ne sont pas seulement 
imbriquees car, si les donnees paragraphe contiennent parfois les balises 
orange ou gras, elles contiennent aussi du texte (voir fig. 9.2). 

Voici la DTD : 

<?xml version="1.0" encoding="IS0-8859-l"?> 
<! ELEMENT page (paragraphe+)> 
<!ELEMENT paragraphe (gras*,orange*)> 
<! ELEMENT gras (#PCDATA)> 
<! ELEMENT orange (#PCDATA)> 

Nous voyons ici que l'element page contient un ou plusieurs elements 
paragraphe. L'element paragraphe, lui, ne contient aucun element gras 
et orange ou en contient plusieurs. Les elements gras et orange sont des 
donnees traitees par le processeur XSLT. 
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▲ Figure 9.2 : Accesites.com 

9.4 Le XSLT 

Le XSLT est un langage de type XML qui utilise la syntaxe et la 
semantique d'un autre langage nomme XPath. Tout cela forme un vrai 
langage de programmation qui permet de creer des processus de grande 
complexity. 

L'espace de nommage 

II s'agit d'une sorte d'en-tete du fichier. II contient le type d'encodage des 
caracteres (ici les caracteres d'Europe occidentale) et la version de XML 
(en ce moment, c'est la version 1.0). 

<?xml version="1.0" encoding="IS0-8859-l"?> 

<xsl :styl esheet xml ns :xsl =" http://www.w3.org/1999/XSL/Trans form" 
version="1.0"> 



328 • Double Poche PHP & MySQL 



Le XSLT 



La declaration xml ns (XML name space) a un attribut qui ressemble a une 
URL mais, en fait, c'est juste une convention qui designe le type de 
nommage qui sera utilise. 

La feuille de style 

Ensuite, la feuille de style est contenue entre les balises 
<xsl :stylesheet...> et </xsl :stylesheet>, et vous pouvez y declarer 
les differents modeles en commencant par le modele de la racine. Ce 
modele represente la forme generate de votre page. Ainsi, vous y mettrez 
votre charte graphique : le logo, la barre de menus. . . tout ce qui enveloppe 
les donnees. Vous partez d'un fichier HTML que vous normalisez en 
XHTML. Vous convertissez alors les balises <br> en <br />... selon les 
regies enoncees plus haut. Ensuite, vous caracterisez le html comme etant 
du: 

<html lang="fr" xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 

Le fichier HTML original peut contenir des caracteres que vous ne voulez 
pas soumettre au traitement XSLT, comme votre code javascript dans 
Fen-tete. Pour cela, vous l'introduisez dans la balise <! [CDATA [...]]> : 

<script language="JavaScript"xxsl :comment><! [CDATA[ 
function MM_prel oadlmages () { //v3.0 

var d=document; i f(d. images) { if(!d.MM_p) d.MM_p=new ArrayO; 
var i ,j=d.MM_p. length, a=MM_prel oadlmages. arguments; 
for(i=0; i<a. length; 1++) 
if (a[i].indexOf("#")!=0){ 

d.MM_p[j]=new Image; d.MM_p[j++] . src=a[i] ; } } 

1 

]]></xsl :comment> 
</script> 

Cela ne vous empeche pas d'utiliser aussi des feuilles de style CSS dans 
votre document resultat. 

<link rel="stylesheet" href="accesites.css" type="text/css"/> 
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Les modeles 

Votre modele {template) est encadre par les balises <xsl : tempi ate> et 
</xsl : tempi ate>. L'ouverture de la balise utilise l'attribut match, qui 
identifie l'element qui correspond au modele dans le fichier XML : 

<xsl : tempi ate match="/"> 

Ici, le signe barre oblique designe l'element racine. 

Vous introduisez votre code entre vos balises. A l'endroit oil vous devez 
introduire des donnees xml qui sont sous l'arborescence du modele 
courant, vous appelez le modele qui leur correspond (match) soit par son 
nom de balise, soit par un terme generique. Voici l'exemple expurge de 
nombreuses lignes de code javascript et html (ne le prenez pas litterale- 
ment), car c'est ici le code XSLT qui nous interesse. Dans le fichier 
complet, l'appel au modele de l'element paragraphe est insere dans un 
tableau HTML. 

<xsl : tempi ate match="/"> 
<html lang="fr" xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<ti tl e>AcceSi tes</ti 1 1 e> 

<meta http-equiv="Content-Type" content="text/html ; 
charset=iso-8859-l"/> 

<script 1 anguage="JavaScript"xxsl :comment><! [CDATA[ 
function MM_prel oadlmages () { //v3.0 

var d=document; i f(d. images) { if(!d.MM_p) d.MM_p=new ArrayO; 
var i ,j=d.MM_p. length, a=MM_prel oadlmages . arguments; for(i=0; 
i<a. length; i++) 

if (a[i] .indexOf ("#") !=0){ d.MM_p[j]=new Image; 
d.MM_p[j++] .src=a[i] ;}} 

I 

]]></xsl :comment> 
</script> 

<link rel ="styl esheet" href="accessites.css" type="text/css"/> 
</head> 

<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" 
margi nwidth="0" marginheight="0" 

onLoad="MM_prel oadlmages ( ' i mages/bout pack_over.gi f ' , 'images 
/boutoption_over.gi f ' , 1 images/boutcommand_over.gi f ' , ' images 
/bout con tact_over.gi f 1 , ' images/boutmarche_on.gi f 1 , ' images 
/boutdevi s_on . gi f ' ) "> 
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<xsl :apply-templates sel ect="page/paragraphe"/> 

</body> 
</html> 

</xsl : tempi ate> 

Ensuite, nous ajoutons les modeles des differents elements : 

<xsl :template match="paragraphe"> 

<p cl ass="courant"> 
<xsl :apply-templates/> 

</p> 

</xsl :template> 

II s'agit ici d'un paragraphe ; nous appliquons done les balises <p> et 
</p>. <xsl : apply-templ ates/> est une commande generique qui evite 
de nommer chaque modele a appeler et qui appelle done le contenu du 
paragraphe dont les contenus gras et orange en verifiant leur modele. 

<xsl : tempi ate match="gras"> 
<bxxsl :val ue-of select^" . "/></b> 
</xsl : tempi ate> 
<xsl :template match="orange"> 
<p class="sstitre"xxsl :value-of sel ect=" . "/></p> 
</xsl :template> 

Nous voyons apparaitre ici la commande <xsl : val ue-of 
select=" . "/>, qui represente la valeur de l'element courant. On aurait 
pu aussi nommer chaque element. 

Comme vous pouvez le constater, nous pouvons envisager la structure de 
donnees d'un fichier XML comme une arborescence ou une imbrication 
de donnees de type poupees russes. C'est un langage declaratif fonde sur 
des modeles (templates). 

Notre ouvrage n'est pas un livre sur le langage XML, et il s'agit done la 
d'une introduction pour vous aider a aborder ce langage. Dans ce chapitre, 
nous ne faisons qu'effleurer le XML avec des exemples pratiques. II reste 
a etudier maintenant le fichier PHP qui appelle les processus de traitement 
de ces fichiers. 
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Le fichier PHP appelle les differents fichiers qu'il envoie vers les API pour 
qu'ils soient traites en vue d'un fichier resultat. Voici un exemple de code : 



$xslt=xslt createO; 




$resul tat=xsl t process ($xsl t, ' index. xml' . 


, ' index. xsl ' ) ; 


echo $resultat; 




xslt free($xslt) ; 





Le programme cree un analyseur XSLT par la fonction xsl t_create() 
puis il cree avec 1' analyseur, le fichier XML et le fichier XSLT un fichier 
resultat qui sera ici affiche a l'ecran avant d'etre efface de la memoire du 
serveur. Cette fonction a trois arguments supplementaires optionnels qui 
permettent de passer des parametres au processeur (ici Sablotron). 



Le premier argument est le nom du fichier resultat, si vous voulez 
conserver ce resultat dans un fichier comme nous le verrons dans les 
prochains exemples. Si vous ne l'utilisez pas mais que vous utilisiez les 
arguments suivants, il vous faudra mettre NULL pour signaler son absence. 

Le deuxieme argument est un tableau d'arguments qui pour l'instant est 
reserve aux versions prochaines de Sablotron. 

Le troisieme est un tableau de parametres au processeur XSLT, tels des 
parametres de pagination. 

Avant de lancer 1' analyseur XSLT, le fichier php peut proceder a des 
operations afin de les envoyer au processeur. Tous ces fichiers se marient 
harmonieusement en se completant. PHP apporte sa richesse de fonctions 
et sa puissance, XML structure les donnees et les rend simples a mettre a 
jour, y compris par des non-specialistes, XSLT ajoute une grande 
versatilite de format du meme document (fichier HTML, fichier CSV...). 

9.6 Magasin electronique en XML 

La plupart du temps, une boutique electronique est une suite de pages qui 
affichent des articles avec leur nom, leur reference, leurs caracteristiques 
et leur prix accompagne d'un bouton ou d'un lien pour le stocker dans le 
caddie. Ce caddie n'est que la metaphore d'un tableau conserve en 
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memoire, au fil de la navigation, sur un fichier, une base de donnees ou 
une variable de session. 

Le cote fastidieux de ce genre d'application est l'elaboration du format 
des pages et de leur presentation, qu'il s'agisse de la boutique elle-meme 
ou du contenu du caddie et enfin de la facturation. Le XSLT permet de 
creer un format une fois pour toutes puis de le reutiliser avec des 
modifications minimes. Dans ce chapitre, nous allons non pas explorer 
tous les aspects de cette problematique mais aborder la pagination et la 
maniere dont vous pouvez concevoir votre application. 

La conception de la boutique 

Imaginons que vous ayez un client qui vous demande une boutique. Une 
boutique est non pas un monument mais un flux ; les articles changent 
comme les prix ou les modeles, il faut done qu'il soit facile au 
commercant de mettre a jour sa boutique sans avoir a faire appel a chaque 
fois au programmeur. Avec le XML, il pourra modifier directement le 
fichier XML. Ce dernier sera construit a partir de la base de donnees 
MySQL, qui elle-meme sera nourrie par un fichier CSV cree a partir d'un 
tableau. Ainsi, le commercant pourra faire ses modifications sur son 
tableur et modifier le contenu de son site. 

Creation du fichier XML 

Le fichier original sera un fichier CSV, e'est-a-dire un fichier au format 
texte. Vous allez en recuperer les donnees une fois votre table creee a 
Fidentique du fichier. Les lignes sont marquees par des retours a la ligne 
et les donnees sont separees par un point-virgule. Veillez a ce qu'il n'y ait 
aucun point-virgule dans les donnees. 

Le commercant met le fichier .CSV dans un repertoire reserve sur le 
serveur par ftp ou par un formulaire de telechargement de fichier. Le 
programme peut le recuperer comme suit : 

$1 ignes=f i 1 e ( "bout i que. csv") ; 
foreach ($lignes as $ligne){ 
$donnees=explode( ' ; ' , $ligne); 
$arti cl e=$donnees [0] ; 
$reference=$donnees [1] ; 
$caracteristique=$donnees[2] ; 
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$prix=$donnees[3] ; 

$sql = "TRUNCATE TABLE 'boutique'"; 

mysql_db_query ($dbname,$sql ,$id_l ink) ; 

$sql="insert into boutique (article, reference, caracteristique, 
prix) VALUES ('$article', 1 $reference 1 , '$caracteristique' , 
'$prix')"; 

mysql_db_query ($dbname,$sql ,$id_l ink) ; 

//pour les details concernant les bases de donnees, referez-vous au 
chapitre MySQL en action 

} 

Le programme fait ici une operation dangereuse, c'est-a-dire qu'il vide la 
table avant de la remplir. II serait plus sage de copier les donnees dans une 
autre table puis de faire l'operation de remplacement a la main ou alors, 
si vous disposez d'une table temporaire, de la creer et de faire un commi t 
et un rol 1 back pour changer la table en la nouvelle sans risque. C'est une 
procedure que vous avez parfois dans MySQL(stmctuie mode InnoDB) et 
dans SQLite et qui permet de valider toute la procedure de transaction 
avant de l'enregistrer definitivement dans la base. Si la procedure est 
interrompue, le programme suspend le commit par un rollback et 
l'operation est annulee. Vous incluez dans le programme l'envoi d'un 
e-mail qui vous avertit de l'operation. 

Une fois les donnees entrees, vous allez pouvoir creer votre fichier XML. 
Les balises seront creees par le nom de colonnes. Nous y ajoutons aussi 
des balises pour les pages avec un numero pour attribut et, comme 
element racine, nous utilisons le nom de la table. 

Au debut du programme, les lignes de l'espace de nommage sont creees : 

$nom_f ichi er=" bout i que. xml " ; $nom_tabl e= " bout i que " ;$nbre_par_page=20; 
$fp = fopen ($nom_f i chier, "w") ; // creation du fichier de sortie 
f wri te ($f p , "<?xml versi on= '1.0' encodi ng= ' I SO-8859-1 ' ?>\n " ) ; 
// la racine est $tab 

fwrite($fp,"<!DOCTYPE boutique SYSTEM \"boutique.dtd\">\n") ; 
fwri te($fp, "<?xml -styl esheet type=\"text/xsl \" href=\" 
boutique. xsl\"?>\n") ; 

fwri te($fp, "<$nom_tabl e>\n<l adate>$l adate</l adate>\n") ; 

Ensuite, le programme extrait les donnees de la base : 

$sql="select * from $nom_table ORDER BY nom"; 
$resul tat=mysql_db_query ($dbname,$sql ,$id_l ink) ; 
$nombre=mysql_num_rows ($resul tat) ; 
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$i=l; 

while($rang = mysql_fetch_array ($resul tat) ) { 
if ($i==l){ 

fwrite($fp,"<page numero=\" 1\"> \n"); 
} 

elseif ($i%$nbre_par_page==l) { 
fwri te($fp, "</page>\n") ; 
fwrite($fp,"<page 

numero=\"" . ($i+($nbre_par_page-l) ) /$nbre_par_page. "\">\n") ; 

//ici on ajoute 19 

} 

fwri te($fp, "<f i che numero=\"$i \">\n") ; 

//le numero de fiche est optionnel dans le programme qui suit 
$ajout=True; 

foreach ($rang as $cl e=>$val eur) { 

$ajout = !$ajout; 
//vrai une fois sur deux 

//(essayez d'enlever cette variable pour comprendre) 

$val eur=str_repl ace(array ("&" , "' ' , , "<", ">"), array ( '& 1 , 

'"', '&apos;', '<\ '>'), $valeur); 
if ($ajout) fwrite($fp,"<$cle>$valeur</$cle>\n") ; //if 

} //fin foreach 

fwrite($fp,"</fiche>\n") ; 
if ($i==$nombre) { 

fwrite($fp,"</page>\n") ; 
} //fin if 

$i++; 

} //fin while 

fwrite($fp, "</$nom_table>") ; 
fclose($fp); // fermeture du fichier 

mysql_f ree_resul t ($resul tat) ; 
mysql_close() ; 

///////////////FIN CREATION FICHIER XML//////////////////// 

Avec ce fichier XML, nous allons maintenant creer un fichier CSV. 

Creation d'un nouveau fichier CSV a partir d'un 
fichier XSLT 

Nous avons vu precedemment que le fichier CSV est un fichier dont 
chaque rang de la base de donnees est une ligne et dont chaque colonne 
est delimitee par un point-virgule. Nous allons done creer un fichier 
resultat au format CSV a partir du fichier XML boutique.xml et une feuille 
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de style XSLT. Dans le programme, nous introduisons l'affichage des 
erreurs avec les fonctions xslt_error() et xsl t_errno() . Le fichier 
resultat se nommera boutique. csv. 

////////creati on CSV////////////////// 
$xsl t=xsl t_create() ; 

$resultat=xslt_process($xslt, ' boutique. xml ' , 'csv.xsl 1 , 'boutique. csv') ; 
if (!$resultat) { 

echo "Desole, boutique. xml n'a pu etre transforme par boutique. xsl 

en " ; 

echo « boutique. xml . La raison est » . xsl t_error($xsl t) . « et »; 
echo « le code d'erreur est » . xslt_errno($xslt) ; 

} 

xslt_free($xslt) ; 

////////FIN creation CSV////////////////// 

Le fichier XSLT consiste en une concatenation des elements separes par 
une virgule qui est terminee par une fin de ligne. Une nouvelle balise 
apparait dans la feuille de style : <xsl:output/>; cette balise envoie 
l'attribut method="text" a l'intention du format du fichier resultat : 

<?xml version="1.0" encoding="IS0-8859-l"?> 

<xsl :styl esheet xml ns :xsl =" http://www.w3.org/1999/XSL/Trans form" 
version="1.0"> 

<xsl:output method="text" omi t-xml -decl aration= 'yes ' 

encoding="IS0-8859-l"/> 

<xsl : tempi ate match="fiche"> 

<xsl :value-of select="concat(article, ';', reference, 
caracteristique, ';', prix, ';', ' &#xD ; 1 ) " /> 

</xsl :template> 

</xsl :stylesheet> 

Le caractere 
 est une fin de ligne. Vous pouvez vous envoyer ce 
fichier pour avoir une copie de votre base. 

Le fichier XSLT de la boutique 

Ce fichier commence par l'espace de nom. La balise <xsl :param/> est 
declaree, elle initialise les parametres qui sont entres par le fichier php. Ici, 
ces parametres designent la pagination de notre boutique. La page 
courante est initialisee a 1. Cette valeur est donnee par defaut, c'est-a-dire 
qu'elle est prise en compte si aucune valeur n'a ete envoyee au 
programme XSLT. Les autres parametres donnent la valeur de page 
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precedente et de la derniere page. Le parametre script donne le nom du 
fichier php qui lance Fanalyseur : 

<?xml version="1.0" encoding="IS0-8859-l"?> 

<xsl :styl esheet xml ns :xsl =" http://www.w3.org/1999/XSL/Transform" 
version="1.0"> 

<xsl:output method="html " encoding="IS0-8859-l"/> 
<xsl:param name="courante" select="l"/> 
<xsl:param name="precedente"/> 
<xsl:param name="script" select="boutique.php"/> 
<xsl : tempi ate match="/"> 

<html lang="fr" xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 
<head> 

<title>La boutique</title> 
</head> 

<body bgcolor="White" text="Black" link="Blue" vlink="Navy" 

al ink="Red"> 

<div al ign="center"> 

<table width="95%" border="0" eel 1 spacing="10" eel 1 paddi ng="2"> 

<tr> 

<td width="30%" al ign="center" val ign="mi ddl e"> 
<a href="http://apaer.org/accuei 1 .htm"> 
<img src=" . ./images/1 ogos/1 ogo-nouvel 1 e-page-accuei 1 . jpg" 
width="130" height="130" border="0"/></a></td> 

<td width="50%" al ign="center"xbr /></td> 

<td width="20%" al ign="center"> 

</td> 

</tr> 

<tr> 

<td valign="top" col span="3"xp al ign="center"> 
<xsl :apply-templ ates select="boutique"/> 

</P> 

</td> 

</tr> 
</tabl e> 
</di v> 
</body> 
</html> 

</xsl : tempi ate> 

<xsl :template match="boutique"> 

<table width="95%" border="0" eel 1 spaci ng="10" eel 1 padding="2"> 
<xsl :apply-templates 

select=" page [attribute: :numero=$courante] /f i che"/> 
<xsl :cal 1 -tempi ate name="pagination"/> 
</tabl e> 
</xsl : tempi ate> 
<xsl :templ ate match="fiche"> 
<xsl :variable name="reference" sel ect="ref "/> 
<tr> 
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<tdxxsl :value-of sel ect="arti cl e"/x/td> 
<tdxxsl :value-of sel ect="reference"/x/td> 
<tdxxsl :value-of select="caracterisque"/x/td> 
<tdxxsl :value-of select="prix"/> €</td> 
<tdxform action=" {$script} " method="post"> 
<input type=" hidden" val ue=" {$reference} " 

name="i nsert"/> 
<input type="text" value="l" size="2" 

name="quanti te"/> 
<input type=" submit" val ue="mettre dans le caddie" 
class="bouton_admi n"/> 
</formx/td> 
</tr> 
</xsl : tempi ate> 

<xsl :template name="pagination"> 

<tr> 

<xsl :variable name="ul time_page" select="count(./page) "/> 
<xsl :choose> 

<xsl :when test="$courante&l t;=l"> 

<!-- Sur la page 1 la page precedente n'apparait pas --> 
<td>premi ere</td> 
<td>precedente</td> 
</xsl :when> 
<xsl :otherwise> 
<tdxa href=" {$script} ?courante=l"xb>premi ere</bx/a> 
</td> 

<tdxa href="{$script}?courante={$courante -1}"> 

<b>precedente</b> </a> </td> 

</xsl :otherwi se> 
</xsl :choose> 
<td> 

<xsl :text>Page </xsl:text> 

<xsl :value-of sel ect="$courante"/> 

<xsl:text> sur </xsl:text> 

<xsl :value-of sel ect="$ul time_page"/> 

</td> 

<xsl :choose> 

<xsl :when test="$courante=$ul time_page"> 

<!-- Sur la derniere page, pas de page suivante --> 
<td cl as s="pagi nation ">prochaine</td> 
<td cl ass="pagination">derni ere</td> 
</xsl :when> 
<xsl :otherwise> 

<tdxa href="{$script}?courante={$courante +1}"> 
<b>prochaine</b> </ax/td> 
<tdxa href=" {$scri pt}?courante={$ul time_page} "> 

<b>derniere </b> </ax/td> 
</xsl :otherwi se> 
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</xsl :choose> 
</tr> 
</xsl : tempi ate> 
</xsl :stylesheet> 

Ce programme introduit deux types de donnees : les parametres et les 
variables. 

Nous avons vu que les parametres sont envoyes a l'analyseur XSLT par 
le programme PHP. Les variables sont nourries a l'interieur de la feuille 
de style. 

La premiere variable porte la valeur du noeud ref . Pourquoi ne pas avoir 
utilise <tdxxsl :value-of select="reference"/></td> dans FURL 
comme un peu plus haut ? Tout simplement parce que le document XSLT 
est un document XML et que cette forme contrevenait aux regies du XML. 
C'est done une variable qui permet de donner la valeur de la reference qui 
est envoyee dans le tableau qui sert de panier (voir le chariot electronique 
dans le chapitre Des algorithmes, des outils et des fonctions). 

La deuxieme variable evite d' avoir a mettre le numero de la derniere page 
en parametre dans la page PHP ; ainsi, ce programme demande un 
minimum de modifications pour s'adapter a toutes les situations. La 
fonction count () compte le nombre de noeuds de l'element page. 

Le fichier PHP lance l'analyseur enrichi des parametres de page et de 
script. 

Le fichier PHP de la boutique 

Le fichier PHP envoie un certain nombre de parametres dans l'analyseur 
XSLT. II regoit parfois certaines de ces donnees dans l'URL comme le 
numero de la page courante, ou alors les donnees sont nourries par les 
possibilites de PHP : 

$xsl t=xsl t_create() ; 
if ( !$courante) { 
$courante=l; 

} 

/* le fait que $courante soit dans le tableau, le parametre par 
defaut dans la feuille XSLT ne fonctionnera pas car $courante vide 
est pris en compte. Pour que le parametre par defaut soit 
enclenche, il faudrait que le parametre ne soit pas present dans 
le tableau */ 
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$params=array (courante=>$courante, script=>$PHP_SELF) ; 
$arg=array () ; 

$resul tat=xsl t_process($xsl t, 'boutique. xml ' , 'boutique. xsl ' , NULL, 
$arg, $params); 
echo $resultat; 
if (!$resultat) { 

echo "Desole, boutique. xml n'a pu etre transforme par boutique. xsl 

en " ; 

echo « boutique. xml . La raison est » . xsl t_error($xsl t) . « et »; 
echo « le code d'erreur est » . xslt_errno($xslt) ; 

} 

xslt_free($xslt) ; 

Le XML enrichit considerablement le confort du PHP et l'elaboration 
d'une pagination pour une boutique, une page de resultat. Nous aurions pu 
ajouter bon nombre d' applications mais ce n'est pas l'objet de ce livre. 
Avec PHP 5 apparait une nouvelle implementation du XML, SimpleXML. 

9.7 SimpleXML 

Le XML peut etre assez complexe, comme vous l'avez vu precedemment, 
en particulier lorsqu'il est accompagne du XSLT. L'application Sim- 
pleXML, qui est livree avec PHP 5, court-circuite le XSLT. Le fichier 
XML est utilise comme une base de donnees objet. Les donnees peuvent 
alors etre inserees dans un fichier php. 

Prenons un fichier XML tres simple : 

<?xml version="1.0"?> 

<librairie> 

<1 i vre> 

<titre> L'Etrusque </titre> 
<auteur> Mika Waltari </auteur> 
<prix>23,66</prix> 
</l i vre> 
<1 i vre> 

<titre>Les amants de Byzance </titre> 
<auteur> Mika Waltari </auteur> 
<pri x>9 , 99</pr i x> 
</l i vre> 
</l ibrai rie> 
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Avec PHP 5, pour 1' interpreter, il suffira de faire : 



$population = simpl exml_l oad_fi 1 e( ' 1 ibrai rie.xml 1 ) ; 

foreach ($1 ibrai rie->l ivre as $livre) { 
echo 'Titre : ' ,$livre ->titre. '<br>' ; 
echo 'Auteur : 1 ,$livre ->auteur. 1 <br> ' ; 
echo 'Prix : 1 ,$livre ->prix. '€<brxbr>' ; 

} 



Titre : L'Etrusque 
Auteur : Mi ka Waltari 



Prix : 23,66€ 



Titre : Les amants de Byzance 



Auteur : Mi ka Waltari 



Prix : 9,99€ 



SimpleXML est rapide a mettre en place et pratique tant que vos 
applications ne sont pas trop complexes. II vous permettra par exemple 
d'ajouter sur votre site des syndications de nouvelles en RSS (Really 
Simple Syndication ou Rich Site Summary). 




Le RSS 

RSS est un format de fichier XML standard qui comprend une 
balise item contenant les balises title, link, description. La 
syndication designe le processus qui consiste a publier le meme article 
dans plusieurs journaux, magazine ou sites web. Plusieurs versions ont 
suivi la RSS 0.91 et I'ont enrichie. Ce fichier standard est mis sur une 
adresse Internet et permet a d'autres sites d'en recuperer le contenu et 
de I'afficher sous forme de nouvelles sur lesquelles il est possible de 
cliquer pour decouvrir des documents plus consistants. 

http://www.pointbl og.com/index.rdf 
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9.8 Conclusion 



Le XML est en train de devenir le vecteur universel de communication et 
de structuration des donnees. PHP 5 se tourne resolument vers le XML et 
propose par ailleurs l'application Tidy, qui traite, diagnostique et nettoie le 
HTML pour le soumettre aux normes du XHTML. 
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a Figure 9.3 : Tidy 

Cette application existe aussi en ligne pour corriger vos fichiers. 




▲ Figure 9.4 : Tidy en ligne 



342 • Double Poche PHP & MySQL 



Conclusion 



Une application gratuite Valide-XHTML,ci€6e par Alexandre Alapetite, 
valide vos fichiers XHTML, XML, XSLT et DTD. 



N Valid*- XHTML - validateur XHTML *XML ■ Alexandre Alapetite ■ Netscape 6 
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Valide-XHTML 
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▲ Figure 9.5 : Valide-XHTML 

Valide-XHTML vous precise les erreurs avant de mettre vos fichiers en ligne. 



|gJJ ValideXHTML 1.6 



G:\_ 



_code\adherents\adrierents.xrnl; 



] DTD locales @ Semantique Q Recursif Q Liens http 
DOM: iMSXML 



Q Cache memoire 
http://alexandre.alapetite.net 




G : \ code \ adherent s \ adherent s . xml 

Element content is invalid according to the DTD/ Schema . 
Expecting : f iche . 

Line: 11 



▲ Figure 9.6: Valide-XHTML en action 
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La plupart des langages ont, implemented dans leur offre, un ou plusieurs 
modules XML (Java, PHP, Python, C#, C, ASP...). 




■4 Figure 9.7 : 

Python 



Cette galaxie XML (XML, XSLT, XPath, XMLFO...) est desormais 
devenue incontournable pour permettre a la grande heterogeneite de 
l'informatique de converger. 
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Les frameworks ou cadriciels PHP 



Le but de ce chapitre n'est pas de donner un mode d'emploi exhaustif, ni 
un panorama complet des plateformes PHP. II vous permettra juste de 
gagner du temps apres une veille technique assez poussee pour trouver des 
plateformes compatibles PHP4 et PHP5, qui respectent le protocole 
Modele/Vue/Controleur et sont suffisamment developpees pour repondre 
a un grand nombre de situations. 

Les autres criteres importants dans ce choix sont la documentation et 
Faide. L'aide est donnee par des forums avec un grand nombre d'utilisa- 
teurs susceptibles de vous repondre. Parfois, comme avec Xataface, 
l'auteur lui-meme se rend disponible pour repondre, voire modifier le 
code ou ajouter des fonctionnalites qui lui sont suggerees. Ce suivi est un 
gage de duree et d' evolution. 

La description de chaque application sert done ici a donner une idee claire 
de ce dans quoi vous vous engagez en adoptant telle ou telle plateforme. 



Modele/Vue/Controleur 



Modele 

manipule lesdonnees 



Vue 

presente les don nees 





Contrdleur 



Gere I'interactivite et ✓ 
tes relations entre \*~ 
les vuesetle modele 



Requetes 



a Figure 10.1 : MVC 

Pour nos besoins courants, nous utilisons trois plateformes ecrites en PHP. 
Ce choix est le resultat d'une veille technologique et de differents tests sur 
des plateformes diverses : 

■ Xataface pour nos applications simples en interne ; 

■ CakePHP pour nos applications complexes ; 

■ Joomla ou Drupal pour les sites Internet ouverts au public. 
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Une plateforme (ou cadriciel ou framework en anglais) est une sorte de 
coquille vide dans laquelle il est possible de creer son application. Ces 
trois plateformes sont compatibles avec PHP4 et PHP5. 

1 0.1 Une methodologie de travail 

Cette structure impose une methodologie de travail, un cadre de develop- 
pement, par son arborescence de fichiers et de repertoires. Ainsi la 
conception de ces plateformes est developpee selon le schema Modele/ 
Vue/Controleur (MVC), les donnees (Modele) etant separees de la pre- 
sentation (Vues) et des applications qui controlent ces donnees (Contro- 
leur). Chacun des fichiers entre alors dans une de ces fonctions et se range 
ainsi dans un repertoire donne. Ce cadre facilite la collaboration entre 
plusieurs developpeurs ainsi que la maintenance de F application qui obeit 
a des normes. Le nommage des fichiers et leur place obeissent a des 
conventions. Ainsi 1' application connait implicitement la fonctionnalite 
des fichiers selon sa place et son nom, sans qu'il soit oblige de le preciser 
dans un fichier de configuration volumineux. Une fois ces conventions 
assimilees, la creation d'un site est tres rapide. 

L' inconvenient de la plateforme est qu'il faut quasiment apprendre un 
nouveau langage ; la documentation y est done strategique. 

La plateforme propose toutes les fonctions de base communes a toute 
application comme la creation de menus de navigation ou les formulaires. 
Ces routines sont souvent fastidieuses a ecrire et le fait de ne pas avoir a 
les recreer ex nihilo permet de gagner du temps. 

Plus l'application est standard, plus cela devient simple car il suffit de se 
conformer a la documentation de base. Plus il faut ajouter de fonction- 
nalites, plus la documentation est importante. Cette documentation est 
fournie par le site qui propose la plateforme, par un ou plusieurs forums 
et parfois, par l'auteur ou les auteurs. Plus la plateforme est utilisee, plus 
la documentation est fournie et plus le forum est prolixe, ce qui simplifie 
l'elaboration d'une application. Le forum est la pour resoudre les 
problemes des utilisateurs, comme une hotline ; il s'enrichit done au fur et 
a mesure de nombreuses etudes de cas. 
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Codage des caracteres 

Ces plateformes proposent differents codages de caracteres 
entre l'UTF-8 et l'ISO-8859-1. L'UTF-8 permet d'une part I'inter- 
nationalisation du site et autorise d'autre part I'utilisation de caracteres 
francais comme le oe. C'est done preferable. Les donnees doivent etre 
codees en UTF-8 ainsi que la page en PHP. La plupart des logiciels 
d'edition de code permettent le codage des caracteres en UTF-8 mais 
provoquent des erreurs PHP. PSPad (www.pspad.com/fr), un logiciel 
gratuit, permet de coder une page sans ces erreurs. 



Cette structure est concue egalement pour accueillir des themes graphi- 
ques ou patrons (templates) qui donnent un aspect original a un site ou a 
une application. Les fichiers de template sont souvent faits sur le modele 
de Smarty et comme Xataface qui utilise par defaut les graphismes open 
source de Plone (http://plone.org/countries/fr). Les patrons sont 
des fichiers HTML avec des parties code accompagnees de fonctions 
propres a la plateforme. 

10.2 L'architecture 

Modele/Vue/Controleur 

L'architecture MVC est constitute de trois composants qui jouent des 
roles complementaires. 

Modele 

Le modele est tout ce qui accede aux donnees brutes de la base de 
donnees. Le modele encapsule et manipule les donnees depuis et vers la 
base de donnees, les extrayant, les ajoutant, les modifiant et les suppri- 
mant. Toutes ces methodes sont les routines pour agir sur les donnees. 
Ainsi le modele sera le seul code a modifier en cas de demenagement du 
site sur un nouveau serveur. 

Vue 

La vue est la part du composant qui sert a presenter les donnees depuis le 
modele, de maniere intelligible pour que l'usager puisse interagir. C'est 
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generalement la page HTML ou le template (patron). La vue recoit les 
donnees du modele pour les placer a bon escient dans le patron afin de 
creer des formulaires avec des menus de selection, creer des articles... La 
vue ne modifie pas les donnees mais elle se contente de les mettre en 
forme en creant une page. 

Controleur 

Le controleur repond en cas d'interaction de la part de l'usager. Ainsi dans 
une application, en general, c'est toujours la meme page qui est appelee 
mais c'est le controleur qui decode les donnees dans l'URL - comme 
http://www.monsi te. com/index. php?page=2, - et qui les envoie au 
modele, pour qu'il y reponde, puis recupere la reponse pour l'envoyer a 
la vue qui la met en forme. 

1 0.3 Xataface, donnez un visage humain 
a votre base de donnees 

Xataface, anciennement nommee Dataface, est une couche applicative qui 
recouvre une base de donnees MySQL. La mise en place est simple. 
D'autres applications existent comme PhpMyAdmin mais avec Xataface, 
l'interface est plus ergonomique et l'application plus versatile, permettant 
d'ajouter des fonctions et des interfaces graphiques pour que tout un 
chacun puisse Futiliser et constituer un vrai site web. Un systeme 
d'authentification assure la confidentialite des donnees et la personnali- 
sation de 1'acces aux differentes tables et champs de formulaire generes. 



"5" Xataface 



< Figure 10.2 

Xataface 



Avec Xataface, vous n'avez pas besoin de creer les menus, les listes et les 
formulaires. II est juste necessaire de configurer quelques fichiers texte et 
votre site est cree. Ensuite libre a vous de personnaliser le resultat. 

L'application se trouve sur http://xataface.com et s'installe dans un 
repertoire du serveur. Ce seul dossier peut avoir plusieurs applications en 
satellite dans des repertoires voisins hors du repertoire maitre. 
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CRUD 

CRUD signifie Create, Read (ou Retrieve), Update el Delete 
(ou Destroy) : creer, lire, mettre a jour et supprimer. Le principe 
du CRUD est de creer de nouvelles donnees par un formulaire, de les 
afficher sous forme de listes ou de fiches, de les modifier par le meme 
formulaire et de les supprimer. Tout cela dans la meme interface. 



Xataface obeit au principe du CRUD. La programmation est une pro- 
grammation objet, la mieux adaptee pour une application de ce type. 

Xataface est tres rapide et simple a mettre en oeuvre. D'ailleurs l'auteur, 
Steve Hannah, propose un tutoriel video sur le site qui explique le tout en 
quelques minutes, en anglais pour l'instant mais le visuel est tres parlant. 

Pour commencer, il faut installer le repertoire Xataface sur le serveur et y 
inserer la derniere version. II ne faut pas toucher a ce repertoire ; c'est une 
sorte de boite noire car votre application est dans un autre repertoire, quel 
qu'il soit. 

Pour modifier les fichiers de son application, il n'est pas necessaire d'aller 
changer les fichiers de Xataface, c'est meme deconseille. II suffit de creer 
d'autres fichiers avec le meme nom et la meme arborescence dans le 
repertoire de sa propre application. En quelque sorte, les fichiers dans 
l' application surdefinissent les fichiers de la plateforme elle-meme. 



< Figure 10.3 

Xataface 



L'arborescence comprend les repertoires tables, conf et actions et quel- 
ques fichiers : index.php, conf.ini et actions.ini. 

[.'architecture 

Par 1' architecture des fichiers, il est possible de surdefinir un fichier de 
Xataface, en en creant une copie dans 1' application. Ainsi le cceur de 
Xataface contient un dossier templates qui contient les patrons donnant 
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leur apparence aux pages ou a des parties de page. II suffit de creer un 
dossier de meme nom dans F application particuliere en y inserant un 
fichier template modifie, avec le meme nom de fichier, pour qu'il soit 
utilise en lieu et place de 1' original. 

Index.php 

Le fichier index.php indique la vue par defaut de F application, le chemin 
vers le fichier xataface-public-api.php et FURL vers le repertoire de 
Xataface sur le serveur. Ensuite, il charge une instance de l'objet Xataface 
et Faffiche dans Finterface standard ou une autre interface : 

$time = microtime(true) ; 

if (!@$_GET['-sort'] and @$_GET[' -table'] == ' f ichestravaux 1 ) { 

$_GET[ ' -sort '] = 'moment desc 1 ; 

$_REQUEST['-sort'] = 'moment desc'; 

$_GET['-table'] = 'fichestravaux' ; 

$_REQUEST[ ' -tabl e '] = 'fichestravaux'; 

} 

if (empty($_GET['-action'])) $_GET[ ' -action '] = "list"; 

requi re_once ' /var/www/html /dataface-0.7. 1/dataface-publ ic-api .php ' ; 
// include the initialization file 
df_init(_FILE_, ' http://l i ntranet/dataface-0.7. 1' ) ; 
// initialize the site 

$app =& Xataface_Appl i cation: :getlnstance() ; 

// get an application instance and perform initialization 

$app->di spl ay () ; 

// display the application; 

?> 

conf.ini 

Le fichier conf.ini est un fichier texte qui contient la configuration 
generale comprenant le codage des caracteres, la langue, les coordonnees 
de connexion a la base de donnees MySQL, les tables qui s'afficheront, les 
coordonnees de Fauthentification et les preferences. Chaque partie dans 
ce fichier est introduite par le nom entre crochets: [languages], 
[_database], [_tables], [_auth], [_prefs]. Ces 5 parties gerent 
respectivement la langue du site, les donnees de connexion de la base de 
donnees, les tables qui seront affichees, la table et les champs utilises pour 
Fauthentification et les preferences d'affichage. 
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Name Ext 




H£|.. 




Oconf 




Odataface 




') images 




ij_}lang 




O tables 




Vactions.ini 




^conf.ini 




<y index. php 



< Figure 10.4 : 

Exemple d'arborescence 



Les tables 

Ensuite, la partie la plus importante est celle des tables. Le repertoire 
tables contient un repertoire pour chaque table, chaque repertoire portant 
le nom de la table. Ces repertoires contiennent 3 fichiers texte avec une 
extension .ini. 

fields.ini 

Le premier, fields.ini, est attache aux champs du formulaire qui attaque- 
ront la table pour agir sur les donnees. Ce fichier permet de choisir les 
champs qui seront affiches, d'agir sur leur nature, sur leur mode 
d'affichage, sur l'ordre d'affichage... 

Le fichier .ini est un fichier texte ou les lignes commencant par un ; sont 
des commentaires. 

relationships.ini 

Le deuxieme, relationships.ini, contient les modalites de relation entre la 
table et les autres tables (cle etrangere) : 

Le code est de type : 
table. id = "$id_table" 

Ici le premier membre designe la cle etrangere de la table en relation et le 
deuxieme membre concerne la cle de la table courante. 
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Ou alors, il est possible d'y inscrire une requete SQL qui identifie la 
relation entre les deux tables. 

sql = "SELECT * FROM tablet, table2 WHERE tablet. id= table2.id_tablel" 

Plusieurs relations peuvent ainsi etre definies sur ce meme fichier, chaque 
table etrangere etant identifiee par [tablel], [table2]... 

valuelists.ini 

Ce fichier regroupe les valeurs des champs de selection (select, checkbox, 
boutons radio...) et celles des champs autocompletes. 




Autocompletion 

L'autocompletion est cette fonction qui, quand on commence 
a saisir un mot dans le champ d'un formulaire, fait apparaTtre une 
liste de mots commengant par les memes lettres et qui ainsi peuvent 
etre valides comme valeur du champ. 



Ces valeurs sont donnees sous forme de liste ou par une requete SQL sur 
une valeur : 

[selectJXII] 

sql = "SELECT clef, libelle from select_OUI" 

[Creneaux] 
M = Matin 
A = Apres-midi 
J = Journee 



Classe pour la table 

La classe de la table peut etre creee quand le besoin de fonctions 
originales se fait sentir. Ainsi il peut etre necessaire de formater les dates 
dans les champs date ou d'afficher une valeur par defaut dans un champ 
quelconque. 

Le fichier prend le nom de la table table. php, table etant mis pour le nom 
de la table et done du repertoire ou le fichier se trouve. 
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class tables_repertoires { 

function after_action_new() { 

header ( ' Location: ' . ' htt p: //www. monsi te.net/admin/ 
index. php?-action=l i st&-tabl e= ' .@$_REQUEST[' -table'] ) ; 
exit; 

} 

} 

Les fonctions ont des conventions de nommage dans la classe. Ainsi, par 
exemple, cette fonction est declenchee une fois qu'on a cree une nouvelle 
entree dans une table quelconque comme repertoires. Cette fonction, dans 
cet exemple, affiche la liste des repertoires dans la table. De nombreuses 
fonctions existent, en particulier pour afficher une date avec un format 
specifique, ou afficher par defaut les valeurs d'un champ, avec, a chaque 
fois, une convention de nommage dans le nom de la fonction. 

Application Deleguee dans le repertoire conf 

L'application Deleguee est une application qui agit sur toutes les actions 
deploy ees. Ainsi ce fichier peut contenir Tauthentification. II se trouve 
dans le repertoire conf: 

class conf_Appl i cati onDel egate { 

function getPermissions(&$record) { 

$auth =& Dataface_AuthenticationTool : :getlnstance() ; 
$user =& $auth->getLoggedInUser() ; 
if ( !isset($user) ) return 
Dataface_PermissionsTool : :NO_ACCESS() ; 
$role = $user->val ( ' rol e' ) ; 

return Dataface_PermissionsTool : :getRolePermissions($role) ; 




Cette fonction, ici, identifie chaque utilisateur et retourne la permission 
qu'il detient. II est possible d'affiner la granularite en definissant les acces 
aux tables et meme aux champs d'un formulaire qui des lors que l'usager 
n'y aura pas acces, ne sera pas actif. 

Conclusion 

Xataface permet de monter un site en quelques minutes. Ce qui prend le 
plus de temps est de changer l'interface graphique mais si vous creer juste 
une application pour quelques personnes, elle sera operationnelle imme- 
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diatement. Une autre utilisation possible consiste a creer toute 1' adminis- 
tration d'un site qui lui, se sert de la base de donnees geree par Xataface. 
C'est une plateforme dont on ne peut plus se passer une fois qu'on y a 
goute. La documentation est encore en anglais mais V application a ete 
traduite et la prochaine version sera plus aboutie, avec une traduction plus 
complete et une documentation en francais. 

1 0.4 CakePHP, c'est du gateau 

Le projet CakePHP (www.cakephp.org, www.cakepourtous.org) a de- 
marre en 2005, avec comme ambition de proposer un Ruby on Rails pour 
PHP. 




Ruby on Rails ou RoR 

Ruby on Rails est sorti en juillet 2004 et a ete cree a partir du 
langage Ruby qui est un langage de script oriente objet. La sortie 
de RoR fut un coup de tonnerre dans la communaute des developpeurs 
car il repondait exactement aux exigences d'interactivite du Web 2.0. II 
permettait de creer rapidement un site avec du code concis, peu de 
configuration et de I'ajax pour la convivialite. II est utilise par un certain 
nombre de sites web 2.0. 



L'arborescence reflete parfaitement ce modele. Le repertoire cake est le 
repertoire auquel le developpeur ne touche pas, excepte quand il fait une 
mise a jour pour passer a la version superieure de Cake. L'autre repertoire 
important est app qui contient 1' application avec les dossiers models, 
controller et views. 




a Figure 10.5 

Cake 



Chaque partie de l'application doit avoir sa part de modele, de controleur 
et de vue. A ces repertoires s'ajoutent le repertoire tmp qui contient les 
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fichiers de cache, de sessions, de logs et tous les fichiers temporaires. Le 
dossier config contient les rares fichiers de configuration dont les reglages 
pour la base de donnees. Le dossier vendors sert a ajouter des scripts a 
F application. Un autre dossier vendors, situe en dehors du repertoire app, 
rassemble les scripts generiques destines a toutes les applications. 
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▲ Figure 10.6 : vvww.cafe'p/^.org 



Cake offre les memes fonctionnalites que Xataface, avec un plus large 
spectre (differents types de bases de donnees) mais aussi plus de 
complexite. Cake simplifie l'usage des bases de donnees et il presente un 
certain nombre de caracteristiques. 

Cake utilise le mod_rewrite d' Apache pour reecrire les URL a la volee. 
Ainsi FURL http://l ocal host/cl ub/edi t/1/ ira chercher le contro- 
leur cl ub, la methode edi t ( ) , le modele pour aller trouver la donnee avec 
l'id 1 puis l'affichera dans la vue edit.thtml. C'est tres logique et pour 
utiliser cette application, il suffit de se conformer a ces conventions. 

En ajoutant la variable $scaf f ol d (echafaudage) dans le controleur, Cake 
cree les fichiers par defaut. II suffit ensuite de les modifier pour les rendre 
conformes au resultat desire. 

var $scaffold; 
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Sous le dossier app, il reste deux dossiers importants : webroot qui 
contient tous les fichiers qui apparaissent en vitrine (images, ess, 
javascript...) et le dossier helpers. Ces helpers ou aides sont des fichiers 
PHP qui modifient l'affichage d'un element dans les vues. II existe des 
helpers natifs pour Cake comme les helpers HTML qui permettent au 
developpeur d'ecrire son code tres rapidement. Ainsi pour ecrire le code 
d'une aire de texte : 

$html ->textarea( ' Note/body 1 , array ( 1 col s ' =>' 60' , 1 rows 1 =>' 10')) ; 

La notion de rappel {callback) qui a deja ete vue pour Xataface intervient. 
Ainsi une action declenche une nouvelle action qui se deroule avant ou 
apres. 

Cake est une application copiee sur Ruby on Rails ; la conception est 
derivee de Ruby contrairement a Xataface qui est plus axee MySQL et 
PHP et respecte davantage V esprit de Ruby on Rail dans un sens de 
legerete. 

1 0.5 JOOMLA, le meilleur gestionnaire 
de contenu 

Joomla (www . j ooml a . f r) est le meilleur gestionnaire de contenu car il est 
tres complet et utilise largement. Ainsi, il enrole de nombreux deve- 
loppeurs et contient de nombreuses fonctionnalites pour repondre a 
diverses situations. Joomla est ne d'une scission avec la plateforme 
Mambo. Joomla signifie "tous ensemble" en Swahili. 



Joomla! 



-* Figure 10.7 

Joomla 



Le principe de ce type d' application est que le contenu est gere 
separement de la presentation : 

■ lis permettent a plusieurs redacteurs de travailler sur un meme 
document. 
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■ lis suivent un document de la conception a la publication. 

■ lis regroupent et gerent des documents de nature differente (articles, 
documents a telecharger, formulaires, FAQ, calendriers d'evene- 
ments...). 

Joomla permet de separer la technique web de la redaction de billets. Ainsi 
un site Joomla a un webmestre qui s'occupe de la technique et plusieurs 
redacteurs pour rediger le contenu. Les redacteurs sont aides par des 
traitements de texte avec leur barre de texte et des mini-calendriers pour 
choisir une date et l'inserer dans un bon format. 



I £f Joomla!" 
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▲ Figure 10.8 : Joomla 



A une plateforme commune s'agglutinent des extensions, petites applica- 
tions qui ajoutent des fonctionnalites au tronc commun. 

Joomla est done un standard avec une grande diversite en raison de ses 
extensions. Cette diversite explique aussi la possibilite de failles de 
securite ou d'impasses, l'extension n'etant plus mise a jour au gre des 
nouvelles versions de Joomla. 
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Permissions 

Joomla propose un diagnostic de votre site a I'installation. Un 
certain nombre de repertoires demandent une permission 0777 
pour I'installation. Veillez a remettre 0755, une fois I'installation finie. 

Les extensions personnalisent Joomla. Elles sont de quatre types : 

■ Les composants sont des mini-applications, agissant aussi bien en 
avant-scene (frontend) qu'en coulisses (backend ou administration) et 
rattachees souvent a une ou plusieurs tables de la base de donnees. 

■ Les modules sont des elements d' interface qui se trouvent generale- 
ment dans les colonnes de droite et de gauche dans la page d'accueil. 
lis presentent souvent une information, des liens d'une maniere 
difference pour les mettre en valeur. 

■ Les mambots sont des fonctions qui sont actionnees par des evene- 
ments et permettent de transformer les informations avant leur 
affichage. 

■ Les templates (ou patron, comme des patrons de couture) sont la peau 
dans laquelle se glisse l'application. Un patron est compose d'un 
fichier PHP, d'images et d'un ou plusieurs fichiers CSS pour regler 
l'apparence de votre site. 




el Choisir Joomla 1.0.15 ou 1.5 

La version 1.0.15 est la plus ancienne et propose 2 700 ex- 
tensions qui fonctionnent. La version 1 .5 est internationalisee et 
elle est normalised pour un developpement. Si les extensions sont 
primordiales, il vaut mieux adopter I'ancienne version. Si c'est pour un 
nouveau site ou les extensions ne sont pas fondamentales, il vaut 
mieux passer au 1.5.1 directement. Le code a ete simplifie et normalise. 
Son developpement a demande deux ans de travail. 



Double Poche PHP & MySQL • 359 



10 



Les frameworks ou cadriciels PHP 



Drupal contre Joomla 




< Figure 10.9 : 

Drupal 



Un autre CMS tres complet et bien ecrit est Drupal (http: //drupal fr 
.org/ ).Son code est mieux ecrit et repond mieux aux normes de codage. 
II a cependant moins de themes et d'extensions disponibles. 

S'il fallait departager les deux, il faudrait tenir compte de l'utilisation et 
du type de site. 

Drupal 6.8 permet : 

■ de creer un site multi-sites et donne plus de latitude pour moduler les 
categories ; 

■ de deployer une granularite plus fine des permissions ; 

■ de modifier facilement les quelques themes pour les rendre originaux ; 

■ de monter un site communautaire avec de nombreux membres ; 

■ de l'integrer dans d'autres sites grace a son code aux normes. 
Joomla 1.5.8 est : 

■ facile a comprendre, a installer et a enrichir ; 

■ implemente avec un espace d' administration ergonomique ; 

■ parasite par des interactions entre les modules (SEF...) et des bogues 
du a un code mille-feuilles ; 

■ difficile a integrer a d'autres sites ; 

■ riche d'innombrables modules et extensions. 
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Overview Screencaxh Download Doc u mentation Webloq Community Source 



Web development that doesn't hurt 

Ruby on Rails' is an open-source web framework that's optimized 
for programmer happiness and sustainable productivity. It lets you 
write beautiful code by favoring convention over configuration. 



Get Excited Get Stalled Get Better Get Involved 
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▲ Figure 10.10: Ruby on Rails 

Les plateformes sont des aides precieuses pour creer de nouveaux sites, 
collaborer et maintenir un site web evolutif mais elles ne peuvent servir 
pour reprendre un site deja fait. PHP est un langage de script tres souple 
et un site web peut etre cree de multiples f aeons dans V architecture et la 
syntaxe ; les cadriciels imposent un certaine "normalite" dans le code et la 
methode, ce qui rend plus facile la maintenance et accelere les temps de 
developpement, une fois les conventions assimilees. 

Certains d'entre vous souhaiteront aller boire a la source et utiliseront 
Ruby on Rails (www. rubyonrai 1 s .org) et le langage Ruby (www 
.ruby-lang.org/fr/), d'autres employant le PHP5 s'orienteront vers 
Symfony (www. symf ony-project . org) mais le systeme reste le meme et 
le langage PHP a tout a gagner dans le developpement et le foisonnement 
de ces plateformes. 
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Vous voila maintenant avec un certain nombre de fichiers et d' applications 
codees sur des centaines de lignes. Vous pouvez continuer a creer de 
nouvelles applications, si vous aimez concevoir et developper, ou choisir 
de vous pencher sur Farchitecture de vos applications et leur maintenance, 
pour construire vraiment et ameliorer les fichiers au fur et a mesure que 
vous progressez. Vous changerez ainsi le code circonstanciel en code 
elegant, reutilisable et explicite. 

L'application ideale pourra etre placee sur n'importe quel serveur et 
fonctionnera sans modification. Si des changements sont necessaires, 
creez des variables que vous grouperez en tete de fichier. Une autre 
solution, si vous avez de nombreuses variables a modifier, consiste a creer 
un fichier de configuration que vous incluez en tete d'application. 

Personne n'aime se replonger dans des vieilleries pour les trier. 
Aujourd'hui, votre application est nouvelle et vous codez avec lyrisme, 
emporte par l'enthousiasme. Tout vous parait clair. Telle variable possede 
une utilite evidente, telle autre s'articule avec telle donnee. Mais demain, 
un de vos utilisateurs trouvera peut-etre un bogue, vous aurez appris de 
nouvelles facons de coder du langage PHP ou la nouvelle version du 
moteur PHP sera sortie et vous aurez envie d'uniformiser votre code, ce 
qui n'est pas forcement une bonne idee. Pourquoi toucher en effet a une 
application qui remplit son role ? 

Ce jour-la, vous comprendrez a peine la logique qui a preside a vos 
applications construites sans methode. Pour qu'une application vive, elle 
doit etre conc,ue avec soin. 

Utilisez des conventions qui ne varient pas et vous donnent des reperes. 
Par exemple, les noms de variables $resul tat, $passage ou $rang, que 
vous employez dans chaque application, creeront des reperes dans des 
applications de milliers de lignes. Amenagez des raptures dans vos pages 
avec des barres obliques de commentaires pour marquer les limites d'un 
module independant. Commentez abondamment pour que la logique 
sous-jacente apparaisse. Expliquez vos choix. Donnez des noms explicites 
a vos variables et a vos fonctions. Au besoin, creez de la documentation 
technique. Sa redaction vous obligera a preciser des points flous. Elle sera 
un element determinant pour communiquer avec d'autres developpeurs. 
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A certains endroits de votre application, vous aurez des idees de 
developpement, de fonctionnalites supplementaires pour l'utilisateur mais 
il se peut que vous soyez presse par le temps. Si vous ne pouvez realiser 
votre idee, prenez soin tout de meme de l'exposer clairement dans vos 
commentaires ou une documentation a part. 

Creez un document qui repertorie les fonctions que vous avez concues 
avec leur description. Imprimez-le et placez-le a votre portee. 

L'elaboration d'une application se fait en trois etapes : la conception et 
F architecture, la realisation, les tests. Ces trois etapes sont realisees par 
une personne, ou trois ou quatre personnes disposant d'une plus grande 
specialisation. Les termes varient selon les entreprises et 1' aspect privile- 
gie pour chaque tache. 

11.1 Avant 



Temps de creation 
Reflexion 

C I 

R ^^^^H 

M l 

Improvisation 

C I 1 

R ^^^^^^^^M 

M l 1 
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R Realisation 
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▲ Figure 11.1 : Importance • du travail preparatoire 

Essayez de prendre quelques jours de reflexion avant d'entrer dans votre 
application. Imaginez les differents moments de votre application, esquis- 
sez quelques lignes de code sans les developper. Explorer les directions 
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possibles a chaque aiguillage de votre arborescence. Si vous travaillez 
pour quelqu'un, essayez de lui faire preciser ses objectifs et les contraintes 
incontournables. Par exemple pour le magazine, il est interessant de savoir 
combien de pages peut faire un article ou une rubrique, combien d'images, 
comment elles sont placees, comment est faite l'accroche... Preparez vos 
questions. La clarte d'une reponse depend de la precision de la question. 
La relation au client est l'art de poser les questions avec des termes precis, 
clairement compris par l'interlocuteur. 

1 1 .2 Apres 

Apres la conception de 1' application, des tests en profondeur sont indis- 
pensables. D'abord pour deceler les bogues qui peuvent se nicher dans des 
recoins insoupconnes, aussi pour emprunter toutes les avenues ouvertes a 
l'internaute et verifier que pour chaque action, une reponse est prevue. 
Votre application n'est pas lineaire, elle est arborescente et vous devez, en 
tant qu'auteur, visiter la moindre ramure. Dessinez un arbre de possibili- 
tes et certaines eventualites oubliees vous sauteront aux yeux. Rendez les 
pages d'erreur agreables a l'oeil. Reprenez les fonctions qui retournent un 
resultat ou un entier booleen et creez un bloc d'execution pour chaque 
erreur d'execution. Incluez une fonction mail() qui vous envoie un 
courriel avec la variable $PHP_SELF pour avoir l'identite du fichier et le 
type d'erreur rencontre. 

N'oubliez pas de tester votre communication aupres de "candides". Soyez 
explicites dans vos indications sans noyer l'internaute avec des directives 
trop longues. Ceci fait l'objet du chapitre 11. 

11.3 Ledebogage 

Faire une erreur est facile, la deceler peut parfois demander beaucoup de 
temps et d'effort. II existe plusieurs types d'erreur pour un programmeur. 
Cela va de la simple faute de frappe a une inversion de parametres dans 
une fonction, en passant par une confusion de nom de variable. 

Les plus faciles a deceler donnent le numero de la ligne fautive en 
precisant la cause du probleme. Parfois, cette indication est une fausse 
amie car elle indique la derniere ligne de votre application, ce qui 
constitue souvent une erreur d' accolade, de parenthese ou de guillemets. 
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Une astuce pour les corriger consiste a faire une recherche multiple avec 
votre editeur de code sur chaque element de la paire pour les accolades et 
les parentheses. Si le nombre de parentheses ouvrantes et celui des 
parentheses fermantes ne sont pas identiques, le probleme se situe a cet 
endroit. Pour les guillemets, en general, la ligne faussement accusee est un 
peu plus bas que la fautive. Remontez et vous trouverez un guillemet 
manquant, un guillemet double qui repond a un guillemet simple, un 
guillemet interne sans signe d'echappement ou un point- virgule man- 
quant. Parfois ce ne sera pas si facile. 

Vos fonctions ne doivent pas contenir Foperateur @ qui empeche Paffi- 
chage de l'erreur. Vous l'ajouterez une fois les tests effectues, en prenant 
soin de mettre un dispositif qui vous previenne de l'erreur avec une 
identification claire du fichier et de l'erreur. 



Le debogage est d'abord une analyse. Elle consiste a separer les elements 
qui composent F application afin de deceler la cause de l'erreur : separer 
les elements dans le temps et dans Fespace du code. 

Si vous avez deja teste le code et qu'il fonctionnait jusqu'a tel moment, 
remontez la chronologic La confusion vient souvent du fait que nous 
avons accompli plusieurs actions en meme temps et que nous pouvons 
partir dans une mauvaise direction et compliquer la recherche. L'erreur 
s'est-elle produite quand vous avez change de machine ou de serveur, ou 
simplement change la configuration, ou la version de PHP ? 

Verifiez Fordre des parametres dans les fonctions appliquees sur les 
chaines de caracteres ou sur les expressions rationnelles. 



Tab. 11.1 : Ordre des parametres 


Fonction 


Place des elements 


explodeO 


Separateur, texte 


split() 


Motif, texte 


ereg() 


Motif, texte 


ereg replaceQ 


Motif, texte de provenance, texte de destination 


strchr() 


Texte, motif 


strstr() 


Texte, motif 
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Lorsque vous etes certain que le probleme vient du code, analysez votre 
code et clarifiez-en la structure en creant des blocs separes par des lignes 
de barres obliques. Ensuite, appuyez-vous sur le code essentiel en 
desactivant les lignes qui ne font qu'ameliorer votre algorithme. Pour les 
desactiver, mettez-les en commentaires, c'est-a-dire faites-les preceder de 
deux barres obliques. Le moteur PHP les prendra pour des lignes de 
commentaires et ne les executera pas. Dans le code restant, affichez la 
valeur des differentes variables, du debut vers la fin. Nous avons suggere 
precedemment de creer des ruptures dans vos applications pour delimiter 
les modules. Creez des points d'arret pour connaitre la teneur des 
variables en sortie de traitement avec des 

echo $variable; 
exit; 

ou a l'interieur des boucles avec exit ou break 

echo "$variable<BR>"; 
break; 

} 

exit; 

Ajoutez des return dans vos fonctions, ils ont pour effet d'arreter 
l'execution de la fonction et de retourner une valeur. 

Une fois que tout fonctionne comme vous le desirez, reactivez votre code 
secondaire par etapes. L'erreur peut provenir d'une partie du code qui 
neutralise l'autre partie. Si vous etes dans les fonctions de systemes de 
fichiers, vous voulez par exemple obtenir le f i 1 emtime en pensant obtenir 
le TIMESTAMP de la derniere modification du fichier. En fait, juste avant, 
vous devez utiliser le chmod() pour changer les proprietes du fichier. 
Cette commande va aussi modifier le filemtime(). Votre logique serait 
contradictoire. 

Verifiez vos blocs conditionnels. Avez-vous un signe = ou == ? 
Les signes > ou < peuvent etre a l'envers. 

Soyez meticuleux sur les noms de variables et les chemins de fichier. Une 
lettre manquante ou supplementaire, et votre variable ne renverra aucune 
valeur, votre programme ne trouvera pas le fichier cible. Assurez-vous que 
le fichier ou le repertoire possede les permissions requises (chmod). 
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Si vous n'avez rien sur l'ecran, affichez le code source dans le navigateur. 
Soit vous avez un code HTML tellement corrompu, notamment avec des 
tables, que le navigateur n'affiche rien, soit votre requete SQL contient 
une erreur et ne retourne aucun resultat. Souvent, le moteur PHP ecrit une 
phrase d' erreur dans le code source qui n'apparait pas dans la fenetre du 
navigateur. L'erreur peut generer egalement un temps d'execution trap 
important. 

Si vous avez une erreur d'affichage HTML, vous pouvez recuperer le code 
HTML obtenu et l'imprimer pour en voir les erreurs ou le mettre dans un 
editeur HTML Wysiwyg, comme Dreamweaver (sigle de What You See 
Is What You Get : ce que vous voyez est ce que vous obtenez). 

Pour une erreur de requete SQL, lancez la requete dans PhpMyAdmin 
pour deceler la cause. Si une requete n'est pas comprise par la base, 
verifiez le nom des colonnes et la place des clauses. Simplifiez votre 
requete et testez-la en ajoutant les clauses peu a peu. Les clauses LIMIT ou 
ORDER BY sont toujours apres la clause WHERE. Pour une insertion, 
avez-vous le meme nombre de valeurs que de colonnes citees ? 

1 1 .4 Sachez anticiper 

Nous avons vu les fonctions, les variables communes, les constantes, 
Fauthentification, la connexion a la base de donnees et les statistiques. 
Vous pouvez ajouter une fenetre de publicite ou une gestion de vos 
bannieres, une personnalisation de toutes les pages du site, y compris les 
pages qui ne font pas partie du club, pour tous ceux qui utilisent le 
cookie... Ces idees sont interessantes. Elles vous demanderont de creer 
d'autres applications pour vos pages. Si vous avez de telles idees avant de 
creer votre site, vous gagnerez du temps et serez plus efficace. Avec la 
methode des fichiers inclus, l'ajout d' applications supplementaires sera 
cependant facilite. Faites en sorte d'avoir le moins de donnees a ajouter 
pour chaque application, comme dans le mini-forum ou le nom de la table 
prend le nom du fichier en enlevant le chemin et l'extension au moyen 
d'une expression rationnelle. Utilisez au maximum des fonctions PHP 
pour avoir peu de parametres a approvisionner. Dans vos applications, 
laissez la porte ouverte a des extensions de programmes afin que l'ajout 
d' applications ne commence pas par des taches fastidieuses. 
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l'lnternet n'est qu'un outil au service de la communication et de la 
creativite. Nous communiquons avec un grand nombre de personnes a la 
fois, de tous les pays, mais dans le meme temps, la communication passe 
mal d'un individu a l'autre car cet outil informatique n'est qu'une 
prothese pour pallier notre manque de communication. Quand nous 
entrons sur un site qui nous interpelle par notre nom, nous sommes dans 
le virtuel. Nous croyons a une reconnaissance mais personne ne doit etre 
dupe de ce jeu. Nous ne sommes pas dans la realite. Vous ne reussirez la 
communication sur votre site qu'en traversant I'ecran. Pour cela, il faudra 
vous impliquer personnellement. Vous ne pourrez avoir une relation 
personnelle avec tous les membres de votre site, la n'est pas le but, la 
creation d'un noyau de fideles suffira. Vous n'avez pas besoin d'entretenir 
une relation suivie mais si vous communiquez par courriel de loin en loin, 
par causerie ou visiophonie, ou meme si vous organisez des rencontres 
dans des lieux reels, vous creerez une veritable relation, quel qu'en soit le 
degre d'intimite. 

Le partage constitue parfois l'un des buts du site Internet mais beaucoup de 
sites demeurent malheureusement un prolongement de l'ego, alors que toute 
communication reelle est un echange qui comprend un temps d'expression et 
un temps d'ecoute. C'est pour cette raison que le langage PHP et les bases 
de donnees MySQL ont tant de succes. lis rendent en effet le site interactif. 
Ce dernier vous echappe car il appartient a tous ceux qui possedent les 
memes gouts que vous. De nombreux outils sont presents sur l'lnternet et 
gratuits. Vous voulez un portail personnel et interactif, vous avez 1'embarras 
du choix : SPIP, PHPNuke, Thatware... Le seul probleme est que tous ces 
sites, bien qu' interactif s et vivants, sont formates sur le meme modele. II est 
plus interessant de maitriser le langage de construction de ces applications et 
de les modifier comme on le souhaite. 

Au moment de la conception de votre site, reflechissez a ce qui est 
commun a vos pages. Quelles sont les donnees importantes et les 
fonctionnalites que vous voulez proposer aux internautes ? Comment 
allez-vous classer les pages ? Un site est un carrefour d'informations. 
Voyez ces mouvements de donnees, les communications entre les diffe- 
rents acteurs. Que voulez-vous que la machine fournisse ? Comment faire 
agir et reagir les internautes ? Comment coordonner des actions de 
promotion avec des sites complementaires ? Vous pouvez rediger une 
charte qui montre sur quoi vous vous engagez vis-a-vis des membres. Le 
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site Internet n'est pas une affaire d'informatique mais bien de creation et 
de communication. 

Faites appel a votre creativite, laissez-vous aller a rever votre site, 
tournez-le dans tous les sens, dessinez-le avec des crayons de couleurs. 
Voyez-le comme un centre energetique avec de V information qui circule. 
Sortez des sentiers battus. Imaginez votre site comme un volume. Cassez 
cette fascination pour l'ecran et sa vision plate. Tout ceci vous aidera a 
sortir du conformisme de certaines pages, du jardin a la francaise et du 
cordeau cartesien. Une fois votre site dessine, il sera toujours temps de 
vous frotter aux outils. Nous connaissons des programmeurs qui n'ont rien 
a dire. lis offrent alors de faire des pages Web pour d'autres qui sont 
allergiques aux programmes et a l'informatique. Ainsi les programmeurs 
se mesurent a du contenu et la personne creative voit son idee traduite sur 
le Web. Lorsque cela se fait dans la transparence, tout le monde est 
gagnant. Le programmeur acquiert un peu de creativite et le creatif un peu 
du sens de la technologie. Beaucoup d'associations possedent un site Web 
qui est le fruit de ce type de collaboration. 

Creez un forum. Vous trouverez une liste des nombreux outils disponibles 
en annexe. Pliez-les a votre gout, ameliorez-les meme. Definissez des 
listes, des causeries (chat en anglais), des rendez-vous. Rencontrez dans la 
realite vos visiteurs. Interrogez-les au moyen de sondages. Ouvrez une 
boite a suggestions. Ameliorez constamment la transparence de la 
navigation sur le site, le classement des pages. Creez des outils qui vous 
facilitent la mise a jour. Que ce soit un metier ou un divertissement, la 
passion joue un role important. 

1 2.1 La communication sur le Web 

Toute communication est fondee sur une action/reaction. Quand l'internaute 
clique sur un bouton, un lien, une image, il s'attend a creer un evenement 
visible. C'est comme une scene avec des coulisses. La plupart des evene- 
ments se fomente dans les coulisses, sur le serveur. II faut creer une reponse 
pour que l'internaute sache que son action a produit un effet. Le webmestre 
doit faire croire a l'internaute que ce monde virtuel est reel, ou plutot lui 
communiquer sa realite. Le createur de site cree des reponses a chaque action 
de l'internaute. Une fois que l'internaute a clique sur le bouton envoyer, il 
ne doit jamais se retrouver devant une page blanche. Le travail du concepteur 
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de site et du developpeur consiste a prevoir les actions de l'internaute et a 
elaborer une reponse adaptee a chacune de ces actions. II existe toujours 
plusieurs possibilites, y compris lors d'actions malfaisantes. L'internaute 
peut telecharger votre formulaire et modifier vos champs caches avant 
d'envoyer des donnees indesirables, voire destructrices. 

Souvent, ce que vous pensez evident ne Test pas pour l'internaute. Ainsi, 
vous vous apercevez que tel concours lance sur votre site n'a aucun 
succes. En regardant de plus pres, vous constatez que la question posee 
n'est pas suffisamment claire, la recompense insuffisante ou que les 
questions qui l'accompagnent violent la vie privee de l'internaute. II 
existe une ligne rouge que vous ne pouvez depasser. Vous construisez un 
rapport de confiance avec l'internaute et cette confiance peut etre mise a 
mal par une intrusion, une maladresse ou une tricherie. Au fur et a mesure 
que l'internaute se promene sur l'lnternet, son discernement s'aiguise et 
les artifices ne l'amusent plus. 

L'humour 

La machine ne permet pas de se detendre comme lors d'un contact avec 
un etre vivant. C'est pourquoi il est indispensable d'utiliser l'humour pour 
casser l'apprehension de l'inconnu. La machine genere du stress. L'ln- 
ternet permet l'instantane et le rapprochement. Pourtant chacun, face a son 
ecran, est seul. Le webmestre qui reussit a le faire oublier a l'internaute 
gagnera un fidele qui participera regulierement a son site. 

Le soutien 

En tant que webmestre, vous recevrez des questions par courriel dont la 
reponse vous paraitra evidente. Si vous creez une liste de courrier, la 
question la plus courante sera : "comment resilier mon abonnement ?" 
Vous savez que la reponse est en bas de chaque message envoye sur votre 
liste, mais faites l'effort de repondre gentiment et d'expliquer sans que la 
personne ne se sente idiote. Combien de fois avons-nous repondu trop 
impulsivement ou trop vite ? Dans notre culture francophone, le langage 
du corps, le son d'une voix, le ton, le regard et le geste ont plus 
d'importance que le contenu de la parole. L'lnternet, a travers le courriel, 
nous enleve ces reperes et nous ne sommes pas habitues a communiquer 
de cette facon. II faudra du temps pour bien maitriser ce type de 
communication. 
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Nous ne regardons pas un ecran comme un texte imprime sur papier. Sur 
ecran, nous lisons en diagonale car l'ecran n'est pas fait pour lire. L'oeil 
se fatigue a lire sur un ecran. II est toujours preferable d'imprimer. Vu la 
quantite d' informations que nous recevons par 1' Internet, il n'est pas 
possible de tout imprimer, d'autant que les informations sont rapidement 
obsoletes, chassees par l'actualite ou un nouveau flot de courriels. Soyez 
patient avec vos visiteurs. lis vous ont fait l'honneur de s'interesser a 
votre site. lis ne sont pas forcement passionnes par l'informatique. Pour 
eux, c'est simplement un outil pour communiquer qu'ils ne maitrisent pas 
toujours. 

Les emoticones 

Certaines icones transmettent un sentiment :=) . Elles placent un peu 
d'humanite dans les messages. L'information contenue dans un message 
n'est pas evidente. Vous savez ce que vous ecrivez, vous en connaissez 
l'intention et le ton. Juste avant d'envoyer votre message, mettez-vous a 
la place de la personne qui le recoit, hors contexte. Si le message ne donne 
pas d'indice sur le ton que vous employez, les mots risquent d'etre mal 
compris. Si le message est trop neutre, le recepteur projettera dans ses 
mots les sentiments qu'il ressent lui-meme et vous les attribuera. Un 
signe ;=) est toujours sympathique pour montrer que vous n'etes pas 
vindicatif. Les courriels entrainent tellement de malentendus. En effet, la 
communication est immediate, comme la parole, mais a la difference de 
l'oral, les mots restent et peuvent etre mal interpreted car le recepteur n'a 
pas d'indications sur votre personnalite. 

Ce qui arrive par courriels peut se produire sur un site a un degre moindre. 
En effet, vous avez des images et des couleurs mais votre contenu peut etre 
gomme par la forme de votre site. La forme de votre site accroit-elle la 
portee de votre message ? Quelqu'un qui vient sur votre site et ne vous 
connait pas percevra immediatement "ce qui ne colle pas". Soyez tres clair 
sur vos objectifs et n'ayez pas d' arriere-pensees. II vaut mieux faire deux 
sites differents que de placer deux messages contradictoires sur un seul site. 

La netiquette 

La netiquette est l'etiquette du Net, l'ensemble des regies qui permettent 
a une communaute de vivre harmonieusement dans le respect mutuel. Un 
certain nombre de comportements sont mal percus. Si vous envoyez des 
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courriels sans qu'ils aient ete sollicites, soyez tres courtois. Demandez a 
la personne de s'inscrire a votre liste de courrier si elle est interessee et 
precisez que si ce n'est pas le cas, elle ne recevra plus de courriels de votre 
part. Faites en sorte de vous identifier clairement. Essayez de savoir si tout 
le monde peut recevoir des courriels en HTML avec des images. Evitez les 
fichiers joints de type diaporama, mettez-les plutot sur votre site en 
donnant l'adresse pour les personnes interessees. Si vous respectez les 
autres, vous serez respecte et construirez une audience pour votre site. II 
est facile d'accrocher des passants sur le Web. lis parcourront votre page 
d'accueil rapidement puis iront voir d'autres sites. 

La meilleure publicite reste le bouche a oreille. II fonctionne de la facon 
suivante. Vous mettez une information utile, originale ou seduisante sur 
votre site. Un certain nombre d'intemautes auront a cceur d'informer leurs 
relations qui, a leur tour, informeront d'autres personnes. . . La notoriete de 
votre site depend de ce bouche a oreille. II vaut mieux avoir un noyau 
d'une dizaine d'inconditionnels plutot que des milliers d'intemautes 
venant voir pendant une semaine une animation flash qui les fait rire. De 
la meme facon, un travail en profondeur avec des informations de qualite 
confirmera la fiabilite de votre site chez les internautes. 

La mise a jour reguliere 

La creation d'un noyau de fideles autour de votre site est conditionnee par 
une mise a jour reguliere. II suffit d'aspirer certains sites Web pour les 
consulter sur son disque dur. Comme ils ne sont jamais mis a jour, il n'y 
a aucun interet a les consulter en ligne. Votre site doit vivre et etre nourri 
par vous et vos membres. Un bon site ne va pas de soi. Communiquez, 
mettez en avant. Abonnez-vous a d'autres listes de diffusion autour du 
theme de votre site et diffusez de l'actualite breve en plus de vos 
informations plus approfondies, afin qu'il y ait toujours quelque chose de 
nouveau sur votre site. 

La navigation 

La navigation est essentielle pour que les internautes depassent votre page 
d'accueil et s'enfoncent dans les profondeurs de votre site. Un site confus 
frustre le visiteur. La navigation doit etre claire. Entre l'internaute et la 
page, il ne doit pas y avoir trop de clics. Pour qu'une navigation soit 
claire, votre theme et vos sous-themes doivent etre clairs. Si vous avez une 
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classification claire, le site sera simple a composer et a structurer et vous 
aurez davantage d'inspiration pour creer son contenu. Plus de visiteurs 
auront envie d'y participer car ils auront V impression de connaitre votre 
site comme s'ils l'avaient congus eux-memes. 

Le referencement 

Une fois la tournee de tous les moteurs de recherche accomplie (Google, 
Yahoo, Nomade, Lycos, Hotbot, Voilii...), sachez que le meilleur referen- 
cement est l'echange de liens. Un des moteurs de recherche favoris 
actuellement est Google. II place en tete les sites dont on retrouve le lien sur 
de nombreux autres sites. Pour cette raison, nouez des liens autour de vous. 

Utilisez les champs meta, surtout keywords et description. Le titre, les 
mots-cle et la description de votre site ont la plus grande importance, 
comme vous 1' aurez constate dans le programme de moteur de recherche 
inclus dans le chapitre Moteurs de recherche et expressions rationnelles. 

Enfin, utilisez les referenceurs gratuits. Nous en citons dans 1' annexe du 
livre. En un clic, ces applications envoient Fadresse de votre site et sa 
description dans les principaux moteurs de recherche ou annuaires de 
liens. Rien ne sert d'avoir son site indexe dans des centaines de moteurs, 
il vaut mieux etre bien indexe dans ceux que les internautes consultent. 
Alors creez des liens. 

12.2 Conclusion 

Apres une periode de forte speculation qui a fait grimper puis s'ecrouler 
les valeurs boursieres du Web, l'lnternet redevient ce qu'il etait au depart, 
un outil de communication. Mais n'oublions pas que la machine reste une 
prothese destinee parfois a pallier nos manques. Des rencontres peuvent se 
faire et se font sur l'lnternet, mais sans contact humain, elles n'aboutissent 
pas a une relation satisfaisante. PHP et la base de donnees MySQL 
constituent des outils simples qui proposent l'interactivite comme reponse 
a la complexite du monde de la communication. 
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A l'heure qu'il est, PHP 6 n'est pas encore achieve mais les annonces deja 
faites nous en donnent une idee assez precise. II represente une etape 
importante vers une normalisation et une securisation du code. La version 
PHP 4 n'est plus soutenue depuis le 5 fevrier 2008. Le PHP 5, lance en 
2004 et qui est devenu stable en 2008, a permis d'asseoir le langage objet 
dans l'API. Avec l'avenement de PHP 6, PHP gagne en rapidite et en 
maturite. 




•* Figure 13.1 : 
PHP 6 



La version en developpement est telechargeable sur http://snaps.php 
.net/ 

Lune des nouveautes qui nous interessera plus particulierement est la 
generalisation de l'unicode. Lunicode permet d'avoir des noms de 
variable dans toutes les langues, done avec des accents, des cedilles ; ou 
meme en chinois ou en arabe. L inconvenient est que cela cree un frein 
pour internationaliser les scripts, en revanche les scripts sont rendus plus 
lisibles dans une langue donnee et par ailleurs, le code se rapproche de la 
langue parlee, rendant les scripts encore plus explicites. 




Unicode 

L'unicode est une facon de coder informatiquement les 
caracteres pour qu'ils soient internationaux incluant les accents, 
les cedilles et les caracteres de toutes les langues du monde (arabe, 
cyrillique, chinois, tibetain, etc.). Le codage se fait sur un plus grand 
nombre de bits que le codage ASCII (7 bits) fonde sur les caracteres 
propres a la langue anglaise. 



13.1 Unicode 

L'unicode est done utilise dans les noms de variables et dans les chaines 
de caracteres. Ainsi les fonctions qui manipulent des chaines de caracteres 
multi-octets deviennent obsoletes puisque leur specificite devient la regie 
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(mb_strtolower, mb_strtoupper, mb_substr_count, mb_substr, etc.). 
Ainsi PHP jusqu'a la version 6 manipule des donnees binaires et non des 
caracteres, ce qui n'est plus le cas avec l'avenement de cette version 6. 

class elucubrations { 

var $del i re="F6 s'qui fo!"; 

} 

echo $delire ; 
// F6 s'qui fo! 

L' Unicode, ce n'est pas seulement donner des noms bien de chez nous aux 
variables, c'est aussi economiser parfois du code. C'est en fait tout le 
contexte d'une langue qui est livre avec l'unicode : 

■ Les regies de tri d'une liste (cote, cote, cote, ...) ; 

■ Les lettres accentuees mises en capitales accentuees (Q, A, E, £, ...) ; 

■ Les formats de date, d'heure ; 

■ Les formats de nombres, de nombres monetaires (1.022,35 €) ; 

■ Les noms de pays en francais avec le code ISO ; 

■ Les noms de langues en francais avec le code ISO ; 

■ Les noms de fichiers ; 

■ La transcription des chiffres en mots (mille vingt-deux virgule trente- 
cinq euros) ; 

■ Les symboles musicaux, mathematiques (, °°, ^, <,...) ; 

■ La translitteration entre des caracteres locaux vers des caracteres latins 
et vice-versa ; 

■ Possibility de decouper les mots ou les lettres selon la langue ; 

1 3.2 Le parametre Register Globals n'est 
plus disponible 

Ce parametre avait fait le succes du PHP 3. II permettait a des novices de 
faire du code simple pour recuperer les donnees d'un formulaire afin de 
les inserer dans une base MySQL. 

II s'est avere dangereux car ces variables automatiques permettaient a 
quelqu'un de l'exterieur d'injecter du code puisque sa provenance n'etait 
pas certaine. 
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1 3.3 Les Magic Quotes sont retirees 

Les magic_quotes disparaissent. Ces parametres permettaient d'ajouter 
des caracteres d'echappement dans une requete SQL et ainsi eviter 
l'injection de code directement dans les formulaires. II s'agissait juste 
d'une commodite pour les debutants afin de securiser directement leurs 
formulaires. Ces commodites ont permis au PHP d' avoir cette popularity 
mais ont fini par encombrer l'API. 

Le site Netl obo . com propose une fonction pour securiser les formulaires 
et qui tient compte de toutes les versions de PHP et emploie la fonction 
PHP mysql_real_escape_string() qui a l'avantage de permettre 
d'echapper tous les caracteres speciaux. 

function quote_smart ($val ue) 

{ 

// Stripslashes 
if (get_magic_quotes_gpc()) { 
//si le magi c_quotes_gpc est active 

$value = stripsl ashes ($val ue) ; 

} 

// Quote if not integer 
if ( ! i sjiumeri c($val ue) ) { 

lvalue = . mysql_real_escape_stri ng ($val ue) . ; 

} 

return lvalue; 

} 

$nom= quote_smart ($_P0ST[ ' val ue'] ) ; 

$sql= "INSERT INTO identite (nom) VALUES ( ' $nom' ) " ; 

Ce code permet d'eviter l'injection SQL dans vos formulaires. 

1 3.4 Le Safe Mode n'existe plus 

Le safe mode consistait a desactiver un certain nombre de fonctions PHP 
qui pouvaient causer des failles. Ce sont les fonctions de fichiers, les 
fonctions systeme ou des fonctions comme la fonction mail (). Pour un 
code mal ecrit, elles peuvent etre dangereuses. 
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1 3.5 Utiliser Freetype 2 et GD 2 

Pour utiliser les free fonts et les graphiques sous PHP 6, il est necessaire 
de se servir des fonctions propres a ces versions de Freetype et de GD car 
leur version 1 n'est plus dans PHP. 

13.6 Plus de HTTP_*_VARS 

Ce terme designe tous les HTTP_*_VARS (HTTP_POST_VARS, 
HTTP_GET_VARS, ...) qui desormais generent une erreur. Ceci a ete decide 
pour normaliser un peu plus PHP. II est demande maintenant d'utiliser 
exclusivement $_P0ST, $_GET, .... 

1 3.7 Les extensions in et out 

« Et les laureats sont... : » 

■ Les modules XMLReader et XMLWriter qui permettent de lire ou 
d'ecrire des flux XML ; 

■ Le module fileinfo qui permet de determiner le type de codage d'un 
fichier. 

Et les sortants sont : 

■ L extension ereg et toutes les fonctions attenantes disparaissent du 
noyau et gagne le domaine des extensions PECL. La bibliotheque de 
manipulation de l'unicode ICU sera utilisee pour des expressions 
rationnelles avec les fonctions autour de preg. 

13.8 Les ajouts 

Des nombres entiers 64 bit 

Les nombres entiers seront par defaut en 32 bits, excepte s'il est specifie 
int64. 
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PHP 6 en ligne de mire 



Goto 

C'est une commande goto sous une autre forme, puisqu'il est maintenant 
possible dans une boucle de sortir de la boucle pour aller a une etiquette 
(label) a un autre endroit du code avec un break etiquette. 



for ($i = 0; $i < 9; 


$i++) 


{ 

if ($i==8) { 




break affiche; 




} 

echo "rien"; 




affiche: 




echo "huit"; 




} 





ifsetorO 

Ifsetor est un raccourci. Ainsi ce code 



if(isset($ P0ST['age'])) 




{ 




echo "Vous avez 


$_P0ST['age'] ans"; 


} 

el se { 




return "Vous n'avez pas 


indique votre age"; 


} 





peut etre desormais remplace par cette ligne 
$age = ifsetor($_POST['age'] , "non mentionne") ; 



Tableaux multi-dimensionnels avec foreach 

Les tableaux multidimensionnels sont courants et PHP 6, la encore, 
simplifie la syntaxe. La ou il fallait deux foreach imbriques il suffit 
maintenant d'une simple boucle : 

$a = array (array (1, 2), array(3, 4)); // Tableau 2D 
foreach ( $a as $clef => $valeur) { 

list($a, $b) = $valeur; // affiche tout le contenu du tableau 

echo $b."<br />\n"; 

} 
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Ce code ci-dessus s'ecrit maintenant avec PH 6 : 



$a = array(array (1, 2), array(3, 4)); 
foreach( $a as $k => list($a, $b)) { 
echo $b."<br />\n"; 

} 



Espaces de nom 

Les espaces de noms consistent en une classification de classes d'objets. 
Cela permet d'appeler toutes les classes d'un espace de nom en une seule 
fois ou d'eviter la collision entre des classes qui auraient le meme nom. 

namespace backoff ice { 
class article { 
} 

} 



APC entre au cceur 

Le cache d' opcode APC devient un standard pour PHP 6, ce qui accelere 
l'execution du code. 



opcode 

L'opcode est du code predigere. C'est I'etape intermediate 
entre un script et le processeur PHP. , 



Au lieu de repeter les meme processus de transformation du code lisible, 
APC stocke les codes machine. 



<%, <?php, <? ? 

Les tags <% %> encadrant le script php et ressemblant au langage ASP 
n'existent plus. Les deux autres sont toujours de mise. 
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Voici quelques references web utiles. La plupart des sites references dans 
F annexe sont en francais et la majorite des logiciels fonctionnent sous 
Windows. Nous avons indique quand ce n'etait pas le cas. 

14.1 PHP 

PHP Hypertext Preprocessor 

Le site central et officiel de PHP. Redige en anglais, il contient les 
dernieres nouvelles, les projets, les versions et la documentation annotee. 
Des versions dans toutes les langues existent. 

www.php.net 



L PHP: Hyper-tout P r sproc KM>r ■ Noiic jpe 6 



lut—i (,4Uon Mfvtm n#r*iam After a Signru lAdw* »>0* 



I 1 J i 



Wlutl K PHP? 

PM>«I -Jcl, .j:t.j 
gonwjI-purpoM KnpDng 

MiUd lor Web duvutopnuifit 
and can b» ambwMud nto 
HTML. If you *>« new to 



PHP 4.3.7RC1 released! 

- php 41.7HC1 has bMn released for tesbng. This » ttM 
first release candidate and should have a very low number of problems and/or Duos. 

.■ ■ ■ ,!;.: !rV il « niuli in |i:,«M.ir.::.! r-*-h(r 

appttanons to uncover any remaining issues. 



Kl*a of how it vrottu, try 
that, dadl out tti« sntrw 



" UM of change* un be found ai the NEWS fie. 



V>V a a pioject of the 



r>-ecj 
tvi server 



Call to speaker for Paris Forum 2004 



The AhUP. Association Frances* des uoksateurs d« pmp, r. 
proud to arrounO^ie 'orum PHP 2004. For this unique event in France, we are 
(oolong for the best French speaking experts, who want to char* their know how 
and enthusiasm 

The forum php features 2 days, with distinct themas: 



The for urn PMP 3QQ4 w* take place in Pans, at the MAP Jean Monnct. on thursday 
2Sth and rnday 26th, november 2004. 
Hon- infoimjtion in French at the. URL 



phplworks 2004 Call for Papers 



php | W rks 




▲ Figure 14.1 : www.php.net 
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PHP Builder, the Resource for PHP developers 

Un site en anglais, tres professional, qui presente des articles de fond, des 
annotations tres utiles pour accompagner la documentation, une biblio- 
fheque de codes, etc. 

www.phpbuilder.com 



3 PHPBu1ldvf-.com - T>.# Rnourc* For PHP D«rv*lop«ri - Microsoft lnt»i net E..; I« ■ I ■ _ O X 1 




▲ Figure 14.2 : www.phpbuilder.com 

PHP Index, la Passerelle francaise 
des technologies PHP 

Un des meilleurs sites en fran§ais. Vous y trouverez des astuces, des 
annonces, des liens et des references... C'est un site tres complet et 
professionnel. 

www.phpindex.com 
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▲ Figure 14.3 : www.phpindex.com 

Nexen 

Les deux webmestres de ce site ont traduit la documentation PHP et 
MySQL pour l'offrir aux internautes. Sur le site, elle apparait en francais 
et annotee. Le site contient des astuces, des forums et les dernieres 
nouvelles. 

www.nexen.net 



Hi m tmmt Mttapi CUB t t 

O.O.id J 6 p. it • e 0" " _ " 




▲ Figure 14.4 : www.wexen.nef 



390 • Double Poche PHP & MySQL 



PHP 



PHP Facile 

Un site destine aux debutants en PHP mais pas exclusivement. II contient 
des cours de PHP et MySQL, un manuel et repertorie les erreurs 
frequentes. 

www.toutestfaci le.com/phpinit.php?tef_site=php 
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A Figure 14.5 : www.toutestfacile.com 

ASP-PHP.NET 

Ce site est le resultat d'un travail approfondi autour du PHP, ASP et .NET, 
sans oublier le XML et d'autres langages. De nombreux scripts et 
tuteuriels ou l'ASP et le PHP sont parfois compares. 



www.asp-php.net 
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▲ Figure 14.6 : www.asp-php.net 

PHP France 

Un site avec beaucoup d'astuces, des tuteuriels, des annonces et des 
morceaux de code. 

www.phpfrance.com 
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▲ Figure 14.7 : www.phpfrance.com 
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PHP Heaven 

Ce site repertorie des projets professionnels autour de PHP, comme Pear, 
et contient des articles. 

www.phpheaven.net 
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A Figure 14.8 : www.phpheaven.net 

AFUP 

L' AFUP, Association francaise des utilisateurs de PHP, est une association 
dont le but est de promouvoir le langage PHP aupres des professionnels et 
de participer a son developpement. 

www.afup.org (voir fig. 14.9) 

Le FAQ du groupe de news faqfciwap (f r . comp. 1 ang . php). 

Le site indispensable pour tout developpeur PHP, une encyclopedic du 
langage PHP. 
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▲ Figure 14.9 : www. a/up. org 
http://faqfclphp.free.fr 
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▲ Figure 14.10 : http://faqfdphp.free.fr 
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MySQL 



MySQL 

Le site officiel de MySQL avec les nouvelles, les documentations et les 
dernieres versions. Site en anglais. 

www.mysql .com 
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▲ Figure 14.11 : www.mysql.com 
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Nexen 

Toute la documentation MySQL annotee en francais. 
www.nexen.net 




▲ Figure 14.12 : www.nexen.net 



14.3 Autres 
Apache 

Les dernieres versions du celebre serveur et tous les projets de la 
communaute du Libre autour de ce serveur. Site en anglais. 

www.apache.org 
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▲ Figure 14.14: www.apache.org 



Easyphp 

Installez-le sur votre machine. II inclut PHP, MySQL et Apache pour 
Windows. 

www.easyphp.org 
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A Figure 14.14 : www.easyphp.org 
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14.4 Outils 

Cette petite liste ne se veut pas exhaustive mais constitue un solide 
bagage. 

Editeurs 

Liste des editeurs PHP 

Une liste sous forme de tableau avec les caracteristiques de chaque editeur 
de code PHP. 

http://steph.pineau.free.fr/php/index.php ?LNK=EDIT 
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A Figure 14.15 : http://steph.pineau.free.fr 

Homesite de Macromedia 

Un des meilleurs editeurs de PHP payants. 

www. macromedia. com/fr/software/homesi te/trial / 
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A Figure 14.16: www.macromedia.com 



PhpCoder 

Un tres bon editeur de PHP gratuit, presque l'equivalent de Homesite. 
www.phpide.de 
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A Figure 14.17 : www.phpide.de 
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FTP 

Filezilla 

C'est un logiciel FTP open source et gratuit. 
http://filezilla.sourceforge.net 
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▲ Figure 14.18 : http://filezilla.sourceforge.net 

Fetch 

Le client FTP le plus courant pour Macintosh. 
http://fetchsof tworks .com 
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I Fetch Softworfcs - Microsoft lrvt»rn« Eiplor»r 




▲ Figure 14.19 : http://fetchsoftworks.com 
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a Figure 14.20 : http://alain.tauber.nom.fr 
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Outclock 

Outclock est un logiciel gratuit en frar^ais qui vous permet de lire vos 
courriels sans les telecharger sur votre disque dur. II vous permet de rejeter 
un spam ou a detruire un virus. C'est pratique aussi pour lire son courrier 
personnel au bureau sans le melanger avec le courrier professionnel. 

http://alain.tauber.nom.fr/Outclock/Outclock.php 

Multipass 

Multipass est un coffre-fort a mots de passe. Indispensable pour vous y 
retrouver dans vos nombreux futurs sites. 

http://gbsoft.free.fr 
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▲ Figure 14.21 : http://gbsoft.free.fr 
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Applications en PHP 

Crypter un mot de passe 

Une page qui vous permettra de crypter le mot de passe que vous insererez 
dans le fichier .htpasswd. 

www.euronet.nl /-arnow/htpasswd 

Un antivirus gratuit 

Un site exhaustif sur la securite qui propose un antivirus gratuit et efficace. 
www.secuser.com/antivirus 

Un outil pour les URL interminables 

Ce site cree une URL courte qui renvoie a l'adresse longue que vous 
avez entree. Cela evite d' avoir une URL coupee dans un courriel, surtout 
quand vous avez de nombreuses variables a la suite comme dans une 
librairie en ligne. 

http://www.tinyurl .com 

14.5 Applications en PHP 

Hotscripts 

Une importante bibliotheque d'applications en anglais 
www. hotscri pts . com/PHP/Scri pts_and_Programs 

SourceForge 

Une forge pour les outils et les projets de la communaute du Libre. Site 
en anglais. 

http://sourceforge.net 
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PHPscripts 

Plus de 500 applications en PHP sur tous les themes. 
http://www.phpscripts-fr.net 

PHPbb 

Un forum en PHP pour votre site. 
www.phpbb-fr.com/ 

Phorum 

Un autre forum en PHP. Site en anglais. 
www.phorum.org 



Atomz 

C'est un moteur de recherche personnel et gratuit pour votre site, en 
francais. Vous personnalisez votre page de resultats aux couleurs de votre 
site. Des statistiques de recherche vous sont fournies. L' indexation sera 
manuelle a partir du site. 

www. x-recherche . com/servi ces . html 



PHPMyAdmin 

Telechargez l'outil d' administration le plus repandu pour MySQL. 
www.phpmyadmi n. net/home_page 

PhpMyChat 

Une causerie en PHP creee par Nicolas Hoizey. 
www.phpheaven.net/projects/phpMyChat 
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14.6 Lesportails 

Typo3 

Typo 3 est un CMS (pour Content Management System, systeme de 
gestion de contenu. Ce systeme permet de gerer un site collectivement et 
simplement avec des possibilites de personnalisation de V interface gra- 
phique. 

www.typo3.fr 

Spip 

Une application tres bien con£ue avec des zones reservees. Ideale pour 
creer un magazine en ligne contenant de nombreuses contributions. 

www.spip.net/ 

14.7 Hebergement 

Pour l'hebergement, vous avez le choix entre les hebergeurs gratuits avec 
ou sans publicite et les sites payants qui vous garantissent plus de bande 
passante, done un acces plus rapide avec votre propre nom de domaine. 
Les sites gratuits se rarefient, absorbes par de grands groupes. Vous 
pouvez aussi vous tourner vers votre fournisseur d' acces internet. 

Gratuit 
ifrance 

Un des survivants des hebergeurs gratuits. L'offre comprend PHP4 et 
MySQL. Une banniere de publicite jaillit a chaque chargement de page. 

www. ifrance.com/heberg/accuei 1 / 
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WebDynamit 

WebDynamit.net est une communaute de webmasters benevoles qui offre 
des services Web gratuits depuis mai 2002. Aujourd'hui, plus de 1600 
sites sont heberges sur leurs serveurs sanas publicite ! N'hesitez pas a les 
aider, ce n'est pas si courant. 

www.webdynamit.net 

Free 

Votre site est heberge sans publicite mais vous ne disposez pas de la 
fonction mai l () et vous disposez de PHP version 4. 

www.free.fr 

La Poste 

Pour avoir ses pages perso, il suffit de souscrire a Faeces libre (vous n'etes 
pas oblige de l'utiliser). La configuration comprend PHP4, MySQL, GD 
et 50 Mo. 

http://offres.accesinternet .laposte.net/ 

Pay ant 

ABC Hebergement 

Le moteur de recherche d'hebergeurs payants. C'est un site incontourna- 
ble pour celui qui cherche. Vous pouvez rechercher parmi les hebergeurs 
qui proposent un serveur mutualise (vous partagez votre serveur avec 
d'autres clients, en ayant votre nom de domaine) ou un serveur dedie (une 
machine pour vous), ou qui hebergent des machines (vous leur confiez 
votre propre serveur). Comparez les prix et les offres. 

www. abchebergement . com 
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Ouvaton les amis 

Un OVNI dans l'hebergement. C'est une cooperative. L'hebergement 
coute pour l'instant environ 12 €/an pour une grande capacite. 

http: //ouvaton. coop/ 



Nexen 

lis ont des offres payantes interessantes avec la version 4 de PHP. 
www. nexenservi ces . com 



Noms de domaine 
Gandi 

Gandi gere les noms de domaines. Leur foire aux questions (FAQ) est tres 
complete pour que vous compreniez comment proceder avec un nom de 
domaine. Leurs prix sont interessants et V interface vous aide a gerer tous 
vos noms de domaines. 

www. gandi .net 



14.8 Referencement 
Referencement 2000 

Cette offre gratuite vous reference aupres de la plupart des moteurs de 
recherche et annuaires de sites. Cela ne vous dispense pas de vous faire 
connaitre par d'autres moyens. 

www. ref erencement-2000 . com/ref gratui t . html 

14.9 HTML et Javascript 

All HTML 

Un site tres complet sur la plupart des langages. Nous vous le conseillons 
pour HTML et Javascript. 

www. all html .com 
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Le Journal du net 

Le Journal du net dans sa partie pour les developpeurs, evoque plusieurs 
langages dont le PHP. Des astuces et des tuteuriels sont proposes. 

http://developpeur.journaldunet.com/ 

Comment 9a marche 

Un site de vulgarisation sur l'informatique, les differents langages, la 
securite, le web, les bases de donnees, la legislation, les reseaux, les 
systemes d'exploitation... Excellent site avec des articles tres clairs et un 
glossaire des termes informatiques. 

www. commentcamarche . net 

14.10 Les groupes de news 

■ PHP, fclp (fr.comp.lang.php) ; 

■ PHP, ap (alt.php) ; 

■ SGBD, fcas (fr . comp. appl i cations . sgbd) ; 

■ SGBD, aps (alt.php. sql) ; 

SERVEUR, fciws (fr. comp. infosystemes. www. serveurs). 
Un site pour consulter tous ces newsgroups 

www. 1001newsgroups.com 

Pour ecrire a I'auteur de ce livre 

L'adresse courriel de I'auteur est livrePHP@carfantan.com et son site 
est http://jean . car fan tan . com. Toute suggestion ou remarque sera la 
bienvenue. 
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!= oil !== 69 

= 49, 69, 69, 82 



== 69 

= 69 

? 38, 184 

# I8l 

# 308 

& 68 

* 115 

- 303 

/ 308 

\n 60, 131 

\r 60 

\t 60 



I 

■ 



\$ 60, 302, 308 

$document_root 177 

$php_auth_pw 173, 175 

$php_auth_user 173, 175 

spiip self 146, 193 

$request_uri 143 

sscriit filename 255 

$script_name 256 

$_GET 383 

$_POST 383 

.htaccess 190-191 

.htpasswd 190-191 

<br /> 329 

<title> 319 



Abs() 265 

Accolades 62 

ADD 113 

Addition 67 

AddSlashes() 86 

Adresses e-mail 

obsoletes 196 

perimees 197 

Affectation 67 

AFUP 393 

Agenda 223 

Alert() 135, 139-140 

Algorithme 77 

ALTER 127 

ALTER TABLE 113 

AND 68. 72, 125, 153 

Annuaire de liens 276, 377 

APC 385 

Apostrophe 57 

Arbre de possibility 366 

Architecture 364 

Archive 313 

ArrayO 210 

Array_count_values(J 300 



Array_diff() 211, 264 

Anay_flip() 300 

Array _intersect() 211 

Array_keys() 210 

Array_merge() 210 

Array _merge_recursive() 211 

Array_pop() 211 

Array_push() 211 

Array_shift() 211 

Array_slice() 211 

Array_splice() 211 

Anay_unshift() 211 

Array_values() 211 

Anay_walk() 211 

Arrondi 265 

Arsort() 214 

AS 154-155 

AsortO 214 

Attributs 161, 324 

Authentification 172 

Autocompletion 353 

AUTOJNCREMENT 110 

AVG() 152 



B 



Barre oblique inversee 58 

Base de donnees 

sauvegarder 118 

Basename() 256 

BETWEEN 153 

BIGINT 117 



Bissextiles 81 

Bits 68 

BLOB 116 

Boolean 55 

Booleens 56 

Boucles 77 



410 • Double Poche PHP & MySQL 



Index 



Boutique 258, 333 

Boutique electronique 332 

Bouton radio 136, 233 



Break 84, 229, 368 

Brevet logiciel 20 



C++ 21 

Caddie 332 

Cadriciels 345 

CakePHP 346, 355 

Calendrier 219 

Caractere 309 

d'echappement 58 

d'espace 309 

de mot 309 

de non mot 309 

de nouvelle ligne 309 

joker 316 

non numerique 309 

numerique 309 

Cardinality 305 

Case a cocher 136 

CDATA 326 

Ceil() 243, 265 

Cellules 

fusionner 35 

CGI 201 

Chaines de caracteres 57, 86 

Champ 

Proprietes 137 

cache 184 

CHANGE 114 

CHAR 116 

Chariot electronique 258 

Chiffrer.inc.php 195 

Chmod 252 

Chmod() 248, 251 

Chop() 90 

Classe 161 

Cle 

etrangere 114 

primaire 112 



secondaire 112 

Client 366 

Club 

conception 108 

CMS 405 

Code hexadecimal 31 

Commentaires 51 

Commit 334 

Communaute du Libre 18 

Communication 373 

CompactO 211 

Compilateur 23 

Compteurs 254 

Concours 247 

Conf.ini 351 

Configuration 51 

Connexion 119 

Connexion. inc.php 120 

Constantes 60 

Constructed 162, 168 

Continue 85 

Controle d'erreur 70 

Controleur 347, 349 

Cookie 179, 181 

effacer 180 

Copy() 249 

Count() 100, 152, 155, 212, 339 

Courriel 375 

Courriel en HTML 193 

CREATE Ill, 152 

Criteres de nommage 54 

CRUD 350 

Cryptage 191, 195 

CSS 329 

CSV 335 



Date 88, 113, 117, 312 

Date() 218 

Dates 218 

DATETIME 118 

Date_nombre() 89, 307 

Debogage 367 

Decalage a droite ou a gauche 68 



DECIMAL 116-117 

Decrypter 195 

Default 77, 112 

DefineQ 60 

DELETE 130, 152-153, 185 

Delete() 249 

Delimiteurs 315-316 
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Demission.php 187, 196 

DirnameO 256 

DISTINCT 153, 282 

Division 67 

Do while 79 

Document Object Model 134 

Documentation 



MySQL 390 

PHP 390 

DOUBLE I IV 

Doublons 112 

Dreamweaver 44, 369 

Drupal 346, 360 

DTD 322, 324, 326 



E-mail 130 

format HTML I3l 

format texte 1 3 1 

formater un courriel 35 

Each 83 

Each() 212 

EasyPHP 45 

Echappement 60, 124 

Echo 58 

Editeurs PHP 398 

Elaboration d'une application 365 

Elements!] 1 37, 323 

Else 75 

Elseif 76 

Emails_perimes 196 

Emoticones 375 

EmptyQ 143 

En-tetes d'un courriel en HTML 132 

End() 213 



Entiers 55 

Envoi en nombre 192 

Envoi() 138, 140 

Ereg() 302 

Eregi() 302 

Eregi_replace() 303 

Ereg_replace() 302 

1 In ecu 70, 366 

de requete SQL 369 

Espace de nommage 323, 328, 385 

Espace insecable 222 

Exit 120, 368 

Expat 324 

ExplodeQ 90 

Expression 

rationnelle 301 

rationnelles compatibles Perl 316 

reguliere 301 

Extract!) 212 



False 55-56 

FcloseQ 249 

Feof() 249 

Fetch 47, 400 

FgetcsvQ 249 

Fgets() 249 

Fgetss() 249 

Fibonacci 102 

Fichier 

donnees 108 

inclus 120 

Fields.ini 352 

Filet) 249 

FileatimeO 251 

Filectime() 251 

Fileinfo 383 

Filemtime 368 

Filemtime() 251 

FilepermsQ 251 

FilesizeQ 251 



Filetype() 251 

Filezilla 400 

File_exists() 251 

Float 55-56, 117 

FloorO 243, 265 

Focus() 139 

Fonctions 85, 97 

imbriquees 101 

nombre 13 

recursives 102 

Fopen() 249 

For 80 

Force Brute 176 

Foreach 82, 214, 262 

FORM 134 

Formulaire 83, 119, 121, 184-185 

champ cache 148 

checkbox 39 

file 40 

hidden 39 
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image 40 

INPUT 39 
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option 40 
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radio 39 

select 40 

selection multiple 141 

submit 39 

text 39 

textarea 40 



wrap 40 

Fpassthru() 250 

Fputs() 250 

Frameworks 345 

Fread() 250 

Freetype 383 

Fscanf() 250, 253 

Fseek() 250 

Ftell() 250 

Fwrite() 250 
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GD 383 

General Public License 20 

Getc() 249 

Get_html_translation_table() 300 

Get_meta_tags() 298, 300 

Glossaire 408 

Google 377 

H 

Header! i 173 

Hebergement 47, 405 

Hebergeur 46, 192 

Heritages 163 

Hidden 150, 184 

Histoire 21 

HomeSite 44 

HTML 26, 407 

alink 35 

cadres 40-41 

commentaires 51 

formulaire 38 

images 32 

liens 33 

link 35 

listes 31 

noframes 42 



Goto 384 

GROUP BY 153 

Groupes de news 408 

Guillemets 50, 57 

doubles 59 

simples 57 



NORESIZE 42 

notions 28 

page index 29 

polices de caracteres 30 

SCROLLING 42 

tableaux 35 

titre de paragraphe 31 

vlink 35 

HtmlentitiesO 86 

Htpasswd 403 

HTTP 176, 201 

en-tete 201 

Https 182 

HTTP (il l VARS 383 

Hi ll' POST Y\RS 383 

Humour 374 



If 74 

Ifsetor 384 

Images 

balise 33 

bordure 34 

gif 32 

jpeg 32 



I 

texte 33 

transparence 32 

ImplodeQ 90 

Include 123, 128, 143 

Index 183 

Indexation 112, 297 

Injection SQL 382 



Double Poche PHP & MySQL • 413 



15 Index 



Inscription au club 119 
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INSERT 152 
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Int 55, 117 

Integer 55 

In_array() 212 



Isset() 

Is_dir() 

Is_executable() 

IsJileQ 

Is_linkinfo() 
Is_readable() 
Is_writeable() 



Java 21 

Javascript 134, 407 

confirmO 186 

evenements 137 

fonction 186 

fonctions 134, 138 

length 135, 139 

methodes 136 



objets 

parselnt() 

tableaux 

variable globale 

variables 

Jointure 

Jointure externe 
Joomla 
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Key() 212 I KsortQ 

KrsortQ 214 I 



Langage 

bas niveau 23 

C 23 

haut niveau 23 

naturel 21 

objet 21 

LAST_INSERT_ID() 281 

Length 135 

Lettres accentuees 305 

Libre 19 

Lien 

affichage 283 

e-mail 34 

fenetre 34 

TARGET 43 

verification 293 
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LIKE 

LIMIT 

Limite 

de mot 

de non mot 
Linus Thorvalds 

Linux 
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List() 

Logiciel 

d' edition de code 

FTP 

libre 

Luelists.ini 
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Magazine 265 

Magic Quotes 382 

Magic_quotes_gpc 87 

Magic_quotes_runtime 87 

MaiK) 130, 192, 366 

Mailto 317 
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Marqueurs 

Match 

Max() 

MAX_FILE_SIZE 
Mb_strtolower 
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Menu deroulant 114, 122, 136 

Meta 377 
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GET 38 

Methodes 161 

Methologie 347 

Mini! 265 
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Mkdir() 250 

MktimeQ 218 

Modele 265, 330, 347-348 
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Modeliser 162 
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Netiquette 
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Next() 
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NO 
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OnBlur . . . 
OnChange 
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OnFocus . 
OnLoad . . 
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OnSubmit 137- 

Open Source 



Page d'accueil 41 

Pagination 340 

Parametres 339 



Modificateur 315 

Modification de l'email 199 

Modulo 67, 81, 221 
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Moteur de recherche 295, 377 

Multiplication 67 

MVC 347 
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pseudo-aleatoires 96 
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OR 68, 72, 125, 153 

ORDER BY 125, 154 
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Referenceurs 377 

Register Globals 381 
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Preface 



Cet ouvrage est destine a tous les publics. La seule condition est de 
connaitre moderement le HTML, qui est le langage vecteur dTnternet. Les 
CSS (Cascading Style Sheets), ou feuilles de style en cascade, sont 
Fessence meme d'un site et touchent tous les domaines. Elles sont 
l'aboutissement d'un long processus de reflexion autour de la mise en 
page, l'utilisation du HTML, la fonctionnalite des differentes parties d'une 
page, la navigation sur le Web, l'utilisation de la typographie et des 
couleurs, la perception d'une page par le visiteur. Le livre part done du 
point zero pour conduire le lecteur, a travers un processus et des methodes, 
jusqu'a l'achevement d'un site. Les bases du code des feuilles de style en 
cascade sont simples. Mais pour les maitriser, il faut en comprendre les 
objectifs et en decoder la grammaire. 

Ce livre est construit, non pas comme une encyclopedie, mais comme un 
tutoriel. C'est non seulement un recueil de techniques et de pratiques, 
mais aussi un ouvrage de reflexions autour de la notion de design. 

Comme nous le disions, le lecteur est cense connaitre le HTML. Un 
debutant en CSS pourra comprendre notre propos grace a la progressivite 
des connaissances distillees, tandis que le designer web deja aguerri y 
trouvera matiere a reflexions et exploitera avec profit exemples et astuces. 

Au fil des pages, vous suivrez la construction d'un site, depuis le debut de 
la conception, en passant par la mise en place du design et des feuilles de 
style. Vous apprendrez aussi a refondre un site avec les CSS sur le site 
photo-de-classe.com. Tout en suivant ce fil, le livre explorera les diverses 
possibilites et eclairera par des points theoriques les normes CSS. 

Les CSS sont une tentative d'ordonner la jungle qu'est devenue le Web 
avec les navigateurs et leur tolerance aux erreurs et aux excentricites. 
Elles sont liees aux standards du Web. II est done necessaire de parler du 
XHTLM et de l'accessibilite aux applications. La separation du sens de la 
forme aboutit a la normalisation de l'un et de l'autre. D'un cote, les CSS 
permettent aux designers web de modeler les pages web a leur guise pour 
en faire parfois des chefs-d'oeuvre de graphisme. De l'autre, les pages 
HTML se stracturent et les developpeurs explorent les promesses du Web 
semantique, l'accession de tous aux contenus et les normes qui simplifient 
la construction des pages et leur maintenance. 
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Les feuilles de style CSS (Cascading Style Sheets) sont un outil 
indispensable pour creer un site web, le maintenir et le rafraichir 
regulierement. La mise en ecran web tend a se rapprocher de la mise en 
page d'un imprime. Si les CSS favorisent ce rapprochement, elles le font 
avec quelques differences notables : 



Tab. 1.1 : Difference entre le document ecrit et le document web 


Imprime 


Internet 


Support fige du papier 


Support heterogene des navigateurs 


Grand choix de polices 


Choix limite de polices 


Forme figee 


Forme evolutive 


Mise en page precise 


Mise en ecran personnalisable 


Parcours de lecture lineaire 


Parcours de lecture erratique 


Fusion presentation/contenu 


Separation presentation/contenu 



Ces differences changent completement la perception du document. La 
volonte de se rapprocher de F imprime papier est un fantasme du 
developpeur, alors que le communicateur prefere privilegier le message. 
Le Web d'ailleurs a eu une vocation initiale de communication. Cette 
vocation a vite evolue, dans un sens plus "artistique". II s'agit de creer des 
oeuvres d'art, ou du moins de belles pages. Tout developpeur de pages web 
met le curseur a mi-chemin entre une communication claire et une belle 
page. L'ideal est d'arriver a concilier les deux. Tout "extremisme" d'un 
cote ou de l'autre est source de frustrations pour l'internaute. 

Le defaut d'un developpeur trop carre est de proposer un texte noir sur un 
fond blanc pour avoir le contenu le plus clair, et d'utiliser au maximum 
toutes les possibilites du HTML comme les differentes tailles de titre, les 
listes numerotees ou a puces, etc. Le HTML a ete invente au CERN par 
des scientifiques a l'esprit rationnel et structure, et non par des artistes. Au 
moment de son invention, le HTML servait surtout a modeler du texte. 
Les liens hypertextes sur un mot ou une expression permettaient d'avoir 
un acces direct a un texte de reference. lis ont peu a peu "perverti" la 
lecture lineaire des textes. 
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Evolution du HTML 



Le defaut de "1' artiste" est de detourner le langage pour creer un 
labyrinthe a base de liens hypertextes, d' images et d' animations sur un 
contenu parfois confus et creux, surprendre le visiteur, jouer avec ses 
reperes, souvent bousculer son parcours balise et ses habitudes de lecture 
et de navigation. 

Les deux tendances sont adequates pour certains projets, mais la plupart 
du temps, l'ideal se situe entre les deux. 



Graphiste Developpeur 

< 1 > 



▲ Figure 1.1 : Le curseur 

Tres vite la forme a pris le dessus sur le contenu, les internautes se 
contentant de surfer sur la Toile, zapper et exploiter l'interactivite. 

1 .1 Evolution du HTML 

Internet est ne avec le lien hypertexte et le HTML, langage simple et 
democratique, a pris le pas sur les langages d'expert comme le SGML. Le 
HTML etait approprie pour des pages simples et tout le monde s'est mis 
a faire des pages a la main sur Notepad ou SimpleText. Le HTML a pour 
fonction de decrire une page a un navigateur. Les webmasters se sont 
sentis limites par rapport aux possibilites etendues qu'ils avaient avec la 
PAO (publication assistee par ordinateur). Le HTML s'est alors enrichi 
de nouvelles proprietes et de quelques balises. Les developpeurs web 
avaient aussi recours a des astuces, comme les tableaux, qui permettaient 
de positionner des elements sur la page alors que aucune balise ne le 
faisait. Le HTML mele des indications de contenu (<title>) et de 
presentation (<b>) dans le meme document, ce qui rend la maintenance 
d'un site lente et compliquee, voire impossible parfois. Le developpeur 
doit se retrouver parmi toutes ces balises qui se chevauchent, sans compter 
les langages de script qui s'y ajoutent (JavaScript, PHP. . .). Dans la guerre 
qui opposait Netscape et Microsoft, chacun a fait cavalier seul, prenant 
F initiative de creer de nouvelles balises et proprietes. La solution pour les 
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developpeurs de sites, afin de remedier a cela, a consiste a utiliser 
seulement le code commun pour que leurs pages puissent etre vues sur 
tous les navigateurs, et done a se limiter au niveau des possibilites de mise 
en page, ou bien a faire un code pour chaque navigateur en le detectant par 
un code JavaScript ou PHP. D'ou la necessite de se mettre d'accord sur un 
standard commun avec le XHTML et les CSS. 

Le XHTML est un puissant outil d' identification de contenus et assiste le 
developpeur souhaitant creer des documents structures, modulables et 
hierarchises. II complete parfaitement les CSS qui, elles, gerent la 
presentation de ces contenus. 

1.2 Le tandem CSS et XHTML 

Le tandem CSS et XHTML reconcilie les deux tendances du Web et marie 
ainsi un beau graphisme avec un contenu rigoureux et bien structure. 

Les CSS ont ete inventees par Hakon Wium Lie et Bert Bos en 1994-1995, 
puis ont ete adoptees par le consortium W3C, qui s'est accorde sur un 
certain nombre de regies qui sont devenues la norme CSS1. Elles 
interviennent pour assouplir et alleger la creation et la maintenance des 
sites web. Elles incarnent cette vieille idee de separer le contenu et la 
presentation. II est ainsi possible de modifier rapidement l'apparence d'un 
site en intervenant sur un seul fichier ou de disposer de plusieurs 
presentations pour un meme fichier, selon le media ou le public vise. Ainsi 
les CSS sont associees a la notion d'accessibilite pour une presentation 
adaptee a chaque circonstance a partir d'un meme contenu. 

En allegeant les documents, le developpeur a eprouve le besoin d' avoir 
une page de contenu aussi bien structuree et aussi normalised que la feuille 
de style. II s'est alors tourne vers le XHTML. L'un des problemes 
principaux auquel tout developpeur de pages web est confronte est la 
diversite des navigateurs et de leur comportement dans 1' "ingestion" et la 
restitution d'un meme code. 

1 .3 Les navigateurs 

En fait, Internet, tel que nous le connaissons, a vraiment commence avec 
Mosaic, le premier navigateur a gerer les formulaires et les images. 
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Les navigateurs 

A l'epoque, en 1993, il n'existait que deux cents sites et le code etait 
simple. Puis sont arrives Netscape et les autres navigateurs avec de 
nouvelles balises. 



NCSA 

MOSAIC 

X Window System • Microsoft Windows • Macintosh 



▲ Figure 1.2 : Mosaic 

Internet s'est developpe grace a la simplicite du code HTML et tout le 
monde s'est mis a creer des pages. Les navigateurs sont alors devenus 
tolerants aux erreurs de code sur les pages visitees. Par ailleurs, au fur et 
a mesure des versions des navigateurs, le code s'est complexifie, chaque 
navigateur se differenciant des autres par du code incompatible pour 
mettre leurs concurrents hors-jeu. Si la tendance s'etait poursuivie, le Web 
serait de venue une sorte de Tour de Babel et aurait perdu son statut de 
reseau ouvert a tous. D'ou le resserrement actuel autour des standards 
avec le XHTML. 



<body bgcolor="#FFFFFF" background="backcours.gif 
text="#000000" link="#009900" vlink="#993300"> 



▲ Figure 1.3: La balise body 

La prise en compte des feuilles de style par les navigateurs a grandement 
allege les pages de toutes les balises et proprietes qui decrivent la mise en 
page telles que <font>, bgcolor, etc. Les pages se chargent plus vite 
parce que le fichier HTML a maigri et que le fichier CSS est charge une 
seule fois puis garde en cache sur l'ordinateur de l'internaute. 
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1.4 



Le concept de feuille de style 



Le concept de feuille de style est une vieille idee. La plupart des logiciels 
de bureautique et de PAO utilisent ce principe car des qu'un document 
atteint une certaine longueur, les styles se repetent sur toutes les pages. II 
est done plus interessant de choisir les caracteristiques de chaque style une 
bonne fois pour toutes a partir du moment ou chaque partie du texte est 
identifiee par sa fonction (titres, notes de bas de page, illustrations...). 
L'interet reside dans le fait que le texte est mis en forme automatiquement 
et qu'une modification sur cette feuille de style modifie tout le document 
immediatement. L'evolution d'Internet appelait necessairement ce genre 
de fonction. Cette fonction s'avere encore plus interessante sur un site de 
plusieurs pages. 

Les feuilles de style en cascade tirent leur nom de la notion d'heritage 
propre a ce type de feuille de style. Cette souplesse et cette simplicite 
d'usage ont permis a la premiere version des CSS de se repandre 
rapidement sur les sites web. 

Les feuilles de style regissent les polices de caracteres et leurs caracte- 
ristiques, la position d'un bloc, sa marge et le placement du contenu a 
l'interieur, sa couleur de fond, la modification de 1' aspect d'un lien au 
passage de la souris, les elements de formulaire, la couleur de l'ascenseur 
de la page, etc. 

Elles favorisent la fluidite dans l'espace, avec la possibility d' avoir une 
feuille de style par media (ecran, papier, mobile...), et bientot par 
utilisateur, et aussi dans le temps, avec les modifications simplifiees lors 
de la mise a jour d'un site. 



Une feuille de style est un ensemble de codes qui identifie des balises 
grace a des selecteurs et des proprietes. Ce code est inclus dans l'en-tete 
d'une page HTML ou dans un fichier independant auquel peuvent se 
referer plusieurs pages web differentes, ou encore a l'interieur d'une 
balise (inline ou en ligne). Ces trois modalites represented des portees 
differentes pour le code. 



1 .5 De la feuille de style a la feuille 
de style en cascade 
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De la feuille de style a la feuille de style en cascade 

En ligne 

Le code inclus dans une balise comme propriete sera applique uniquement 
sur le contenu de la balise. Ce code est circonstanciel et ponctuel. II est 
preferable de le mettre dans un fichier CSS ou dans F en-tete du fichier, car 
ce type d'inclusion est difficile a modifier, surtout sur un gros site, parmi 
tous les fichiers et dans le code parfois tres fourni de ces fichiers. 



<div style="position: absolute; left: 10px; top: 100px;"> 



▲ Figure 1 .4 : Code en ligne dans une balise 

En-tete HTML 

Le code insere dans un en-tete HTML de fichier agit sur le contenu de ce 
fichier, et uniquement de ce fichier. Ce type d'inclusion est utilise pour 
une presentation speciale et circonstancielle qui se cantonne au fichier en 
question. Si ce n'est pas le cas, il est preferable de creer un fichier CSS 
independant. 

<head> 

/*(quelques lignes de code)*/ 

<style> 

<!-- 

.menuski n{ 
position:absol ute; 
width:165px; 

background -col or:#6699cc; 

border:2px solid black; 

font: normal 12px Verdana; 

1 i ne-height : 18px; 

z-index:100; 

vi sibi 1 i ty : hi dden ; 

} 

.menuskin a{ 
text -decoration: none; 
color:white; 
paddi ng-1 eft : lOpx; 
paddi ng-right : lOpx; 

} 

Imouseoverstyl e{ 

background -col or:#31185A; 

} 

Imouseoverstyl e a{ 
col or:yel low; 
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</styl e> 
<head> 

FichierCSS 

Le code entre dans un fichier independant peut servir plusieurs fichiers, 
voire un site entier, pour presenter leur contenu. C'est la solution optimale 
de separation du contenu et de sa presentation. En une seule manipulation 
du fichier CSS, le webmaster modifie la presentation d'un grand nombre 
de fichiers qui en dependent. Le fichier CSS peut importer plusieurs autres 
fichiers, portant l'extension .ess, qui vont integrer alors leurs selecteurs a 
l'interieur. 

1 .6 La notion de mise en page 

Les regies de mise en page qui s'exercent dans l'impression d'un livre 
visent a ameliorer la lisibilite du contenu. II en est de meme pour un site 
web, meme si l'ecran d'un ordinateur permet une plus grande liberte. Par 
ailleurs, le format d'un livre est la plupart du temps a la francaise 
("portrait"), alors que celui d'un ecran est a l'italienne ("paysage"), ce qui 
change le parcours de l'oeil du lecteur. 



FORMAT 
A 

L'ITALIENNE 



▲ Figure 1.5: Le format a l'italienne 
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La notion de mise en page 

Une page donne d'abord une impression d'ensemble creee par la 
disposition du texte, du blanc et des illustrations. 



FORMAT 
A 
LA 

FRANCAISE 



▲ Figure 1.6: Le format a la francaise 

Les maquettistes PAO ont l'avantage de connaitre la surface precise de 
leur medium. lis apposent done sur leur page une grille virtuelle nommee 
"gabarit", qui leur permet de disposer les elements d'une maniere 
equilibree (titrailles, paragraphes, colonnes, illustrations, notes, folio- 
tage...). En revanche, l'ecran d'ordinateur peut avoir des resolutions tres 
differentes qui modifient la fa£on dont les elements sont disposes sur 
l'ecran. Le designer web doit surveiller trois points : l'harmonie des 
couleurs, la bonne repartition des blocs et la lisibilite du contenu. 

Le lecteur lit une page dans le contexte du livre ou du journal, dans une 
continuite coherente qui lui donne du sens, tandis que l'internaute peut 
entrer dans un site a partir de n'importe quelle page sans en apprehender 
le contexte, d'oii la necessite de repeter les elements de navigation sur 
chaque page. L'internaute parcourt les pages au fil de sa peregrination. Au 
depart, le seul navigateur s'appelait Mosaic car le createur des liens 
hypertextes avait reve d' avoir tous les documents ouverts en regard les 
uns des autres, alors que, dans la navigation Internet, le plus souvent, un 
document ouvert fait oublier le precedent. Le lien hypertexte n'est rien 
d' autre qu'une reference a un texte ou a une image, ou a tout autre 
document. 
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Le lien hypertexte et son usage 

La limite de l'usage du lien hypertexte est son hypertrophie, qui fait 
ressembler parfois le Web a un labyrinthe. Une page qui contiendrait trop 
de liens hypertextes ressemblerait a un dedale ou l'internaute se perdrait. 
A moins d'avoir une page de liens, il est conseille de ne pas mettre une 
trop grande quantite de liens. En effet, si un internaute lit un article sur 
Internet qui renvoie des references trop nombreuses, il en oublie le texte 
de base, cense servir de colonne vertebrale a sa quete d' informations, et 
finit la lecture de la page avec une connaissance eclatee. II vaut mieux ne 
pas surcharger le propos de liens. Inserer deux, trois liens dans le texte et 
un peu plus a la fin ou sur le cote suffit pour eclairer le propos d'une page. 
Par contre, le visiteur s' attend a disposer de nombreux liens sur la page 
d'accueil. 



Les pages de ce site sont diffusees au format XHTML 
1 .0 , les feuilles de styles au . II est amsi 

lisibile dans tous les navigateurs actus 



| Cascading Style Sheet | 



Figure 1.7: L 'intitule de lien 



II existe un art du lien, qui donne envie de cliquer, un art d'introduire le 
lien par un contexte, un classement ou par un intitule explicite. 

Les liens peuvent s'ouvrir sur une nouvelle fenetre. L'abus de cette 
pratique rend la communication confuse et peut, en outre, agacer les 
internautes qui se retrouvent avec un grand nombre de fenetres ouvertes 
et non reliees entre elles. Par ailleurs, de nombreux internautes peuvent 
cliquer du bouton droit sur un lien pour ouvrir une nouvelle fenetre quand 
ils en ont envie. 

\ 

Precision du lien 

Le lien doit renvoyer sur la reference precise, et non pas sur 
une page oil le lecteur doit chercher la reference dans un 
ensemble d'informations. 

V / 
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L'harmonie des couleurs 

Les couleurs donnent la premiere impression au visiteur, au moment de 
l'ouverture de la page. Ensuite, elles doivent etre suffisamment discretes 
pour accompagner la lecture, conduire l'oeil sans interferer. La couleur a 
le meme role que la musique de film : elle souligne les espaces importants, 
elle tonifie ou s'efface, mais surtout elle sait se faire oublier. Pour etre sflr 
d'afficher des couleurs fideles sur tout ecran, il est conseille de se servir 
d'une palette de couleurs securisee. Les couleurs web securisees regrou- 
pent les 216 couleurs utilisees par les navigateurs, quelle que soit la 
plate-forme employee. 











3 
-) 




Llo 


■a 




'J 



▲ Figure 1.8: La palette des couleurs 



Cette palette securisee garantit que les couleurs s'affichent correctement 
avec la definition de l'ecran reglee sur une profondeur de 256 couleurs. 
Pour creer une image legere, il faut se contenter des 256 couleurs. Quand 
un ecran ne peut afficher la couleur qui lui est demandee, il affiche alors 
une couleur voisine. 



Tab. 1.2: Affichage des couleurs a 


'ecran 




Bits par pixel 


Nombre maximum de couleurs 




1 


2 




4 


16 




8 256 
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Tab. 1.2 : Affichage des couleurs a I'ecran 


Bits par pixel 


Nombre maximum de couleurs 


16 


65 536 


24 


16 777 216 



La plupart des ecrans a l'heure actuelle sont de 24 bits et done suscepti- 
bles d'afficher la couleur demandee. 



Tab. 1.3 : La memoire graphique et la resolution d'ecran 


Resolution 
et memoire 


512 Ko 


1 Mo 


2 Mo 


4 Mo 


8 Mo 


640 x 480 


8 bits 


24 bits 


24 bits 


24 bits 


24 bits 


800 x 600 


8 bits 


16 bits 


24 bits 


24 bits 


24 bits 


1 024 x 768 




8 bits 


16 bits 


24 bits 


24 bits 


1 280 x 1 024 






8 bits 


24 bits 


24 bits 


1 600 x 1 200 






8 bits 


16 bits 


24 bits 



Selon le theme du site, une couleur ou deux seront privilegiees. Par 
exemple, pour le theme du nautisme, il pourrait s'agir du bleu et du jaune ; 
pour la nature, le vert est indique. Certaines couleurs sont froides, comme 
le bleu, et d'autres chaudes, comme le jaune et le rouge, ou encore 
fraiches, comme le vert. II existe par ailleurs de nombreuses nuances. La 
couleur affectee au site comme dominante lui donnera une temperature et 
influencera le visiteur, sans meme qu'il ne s'en apercoive. 

La repartition des blocs 

La repartition des blocs s'inscrit sur le fond de page. lis sont materialises 
par des fonds de couleur, des filets, des gouttieres, et leur ensemble forme 
un motif qui aide le visiteur a promener son regard, a s'arreter ici ou la. 
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▲ Figure 1.9 : Le.s Woes 

Si le fond de page est suffisamment clair et la proportion entre le contenu 
et le "blanc" equilibree, le lecteur a plaisir a revenir sur cette page. Les 
proportions traditionnelles entre le texte et le blanc vont de 5:8 pour de 
Fartistique jusqu'a 3:4 pour du texte fourni. Le standard est entre les deux, 
2:3. 

Le blanc est represente par les espaces (gouttieres, interlignage, fond de 
page). 

La lisibilite du texte 

Le texte sur un ecran est moins lisible que sur le papier, Fecran etant 
constitue d'un ensemble de carres appeles "pixels". Le corps des polices 
employees ne doit pas etre trop petit, surtout pour les polices avec 
empattement. Cette regie se renforce avec une police claire sur un fond 
sombre, qui demande souvent d'etre en gras. 
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1 .7 Les cascades de style 

Internet a emprunte a l'imprimerie un certain nombre de metaphores. On 
parle de pages web et de mise en page web. Les designers web viennent 
souvent du monde de rimprimerie, et pourtant, les techniques de PAO 
employees dans rimprimerie ne peuvent s'appliquer entierement sur la 
Toile. Le Web est un monde mouvant, la page web se plie a de nombreux 
medias. La meme page vue par des navigateurs differents aura une 
apparence modifiee, autant par les polices de caracteres que par les 
couleurs et par la mise en page elle-meme. La mise en page est realisee 
par trois acteurs : 

■ le developpeur du site, qui peut avoir cree une ou plusieurs feuilles de 
style pour la meme page ; 

■ l'utilisateur qui peut avoir concu une feuille de style utilisateur pour 
normaliser les pages qu'il visualise et les rendre plus claires a lire par 
exemple, ou encore pour leur donner un design qui lui plait. 

■ le navigateur qui utilise une feuille de style par defaut. 



CSS 








NAVIGATEUR 






3 


CSS 








UTILISATEUR 






2 


CSS 










DEVELOPPEUR 






1 







A Figure 1.10: La priorite des differentes feuilles de style 
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Les cascades de style 

Le resultat est la combinaison de ces differentes feuilles de style, batie 
dans la memoire du navigateur et creee au fur et a mesure de la lecture de 
toutes les feuilles de style. 

Chacun de ses acteurs propose sa propre feuille de style pour une page 
donnee. Ainsi, deja avec le CSS 1, le navigateur corrigeait le code envoye 
par une feuille de style et en rectifiait les defauts susceptibles de rendre la 
page illisible, comme des lignes qui se chevauchent a cause d'une hauteur 
de ligne inadequate par exemple. 

Avec la version 2 des feuilles CSS, l'utilisateur peut avoir sa propre feuille 
de style, qui s'ajoute a celle creee par le developpeur et a celle du 
navigateur. Ces trois feuilles peuvent contenir des informations contra- 
dictoires, la feuille de style developpeur indiquant par exemple que les 
liens sont verts, et celle de l'utilisateur que les liens sont rouges. Ces 
indications vont declencher une contradiction qui sera geree par le 
navigateur dans le sens du developpeur. Ainsi les indications sur la feuille 
de style developpeur prendront le pas sur la feuille de style utilisateur. 

\ 

Quelle est la feuille de style la plus "ecoutee" 
par le navigateur ? 

En cas de conflit de selecteur ou de propriete, la feuille proposee 
par le developpeur du site prendra le pas sur la feuille de l'utilisateur, qui 
prendra le pas sur la feuille de style par defaut du navigateur. Cet ordre 
sera modifie si le mot-cle ! important est utilise. 

v J 

L'utilisateur a la possibility d'ajouter le mot-cle ! important pour 
s' assurer que le navigateur tiendra compte en priorite de certains 
elements. 

body { background-color: white [important; color: black ! important} 

Le code precedent affichera des pages severes, mais tres lisibles pour 
quelqu'un qui confond les couleurs, comme un daltonien, ou quelqu'un 
qui a une mauvaise vue. Meme si le developpeur a ecrit un beau code qui 
envoie une belle page au navigateur, quand bien meme ce developpeur 
aurait inscrit ! important sur chacune de ses lignes dans le fichier CSS, 
les indications de l'utilisateur supplanteront toute sa belle construction. 
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Avec l'arrivee des nouveaux navigateurs compatibles CSS2, le rapport au 
Web change pour l'utilisateur. Ainsi, quand un site ne lui plait pas, il peut 
le modifier. Le developpeur doit en tenir compte et eviter une mise a 
Fecran trop rigide. 

Face a cela, le developpeur a deux options : 

■ Soit il verrouille sa mise en page car il attache plus d' importance au 
graphisme. 

■ Soit il fait une mise en page ouverte, qui s'adapte a chaque page, car 
il attache plus d'importance au contenu. 

Dans ce qui se profile, la page web sera de moins en moins celle du 
developpeur, et de plus en plus celle du lecteur. Libre a lui de refuser ou 
d' accepter le style graphique du developpeur. Mais si la page obeit aux 
normes XHTML, elle restera lisible, quels que soient les aspects. 

1 .8 Le XHTML 

Le XHTML est une normalisation du HTML, qui le rapproche du XML. 
L'application du code est plus stricte. Un document XHTML du fait de la 
rigueur de sa grammaire permet de faire analyser son code par des 
validateurs qui en relevent les erreurs. 

Le XHTML est adequat pour les CSS dans le sens qu'il donne des 
directives au navigateur pour bien appliquer les CSS. II simplifie le travail 
des navigateurs et celui des robots, qui ecument le Web pour les moteurs 
de recherche. Une des caracteristiques veut que Ton peut inventer des 
proprietes pour marquer le contenu avec son identifiant. 

Le XHTML met en evidence la structure en normalisant et en depouillant 
le code. Pour ecrire un article, il faut fournir un contenu a chaque 
marqueur (titre 1 par exemple), ce qui oblige le redacteur a construire son 
article et a le penser pour le Web. Un article imprime est difficilement 
transposable directement sur une page web ; il demande quelques 
transformations. 
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1 .9 La structure d'une page 

L'usage de l'imprime a forge, au fil du temps, des regies communes 
propres a chaque langue. Ces regies concernent la typographie et la mise 
en page, mais aussi le contenu d'une page. 



Ecrire pour le Web 



On n'ecrit pas pour le Web comme on ecrit pour un livre, un journal ou 
un magazine. La lecture a l'ecran est plus malaisee que la lecture d'un 
imprime. Aussi est-il necessaire de faciliter la lecture en structurant 
F article avec des titres, sous-titres, intertitres, resumes, accroches. II est 
preferable de ne pas utiliser plus de trois polices de caracteres et 
d'emprunter le meme modele pour chaque page car le lecteur se 
familiarisera ainsi avec la maniere de proceder sur le site. 

Pour lire un journal, le lecteur parcourt d'abord la page puis se concentre 
sur le titre qui Fa accroche. Ensuite, des le chapeau, puis le premier 
paragraphe, il decide s'il lit attentivement l'article ou s'il le survole 
simplement pour en tirer l'essentiel. 




▲ Figure 1.11 : Les blocs 
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L'article pour Internet doit subir une reduction, avec des phrases courtes 
qui s'enchainent logiquement. Une idee par phrase et un theme par 
paragraphe sont deux directives a respecter. 

Certaines phrases pourront etre mises en forme de listes ou de schemas. 
Parfois, pour simplifier un texte, il suffit de le decliner sous plusieurs 
formes qui se completeront. Ainsi, chaque page sera courte et sa mise en 
forme plus attractive. Des encadres, des intertitres, une FAQ, une page par 
theme aideront l'internaute a s'orienter dans un sujet, plutot qu'une page 
interminable. Une expression en italique, en gras, un point d'exclamation 
serviront de repere au lecteur. II ne faut pas hesiter a se repeter sous 
diverses formes. 

La lecture sur le Web est avant tout informative, dans le sens oil 
l'internaute parcourt des yeux un texte pour y trouver les informations 
qu'il cherche. La lecture ne se fait pas mot a mot parce que le Web n'est 
pas adapte a ce type de pratique, meme si cela est possible. L'ecran est 
plus adapte aux images qu'au texte. Le caractere de l'ecran n'est qu'une 
imitation du caractere d'imprimerie, une emulation du livre papier. 
L'ecran est de 96 dpi (points par pouce) alors que l'impression du livre est 
au minimum de 300 dpi. Une oeuvre narrative, comme un roman, n'est pas 
adaptee a l'ecran et, au bout de quelques pages, l'impetrant sera pousse a 
imprimer le texte pour le lire plus aisement, sans s'arracher les yeux. 

La lecture sur le Web est active, grace aux moteurs de recherche dans le 
texte, aux incursions vers d'autres textes via les liens de la page et a la 
communication avec l'auteur par 1' intermediate d'un courriel. 

\ 

Imprimer et relire 

Rien ne donne plus mauvaise impression que des fautes 
d'orthographe dans un beau site. II est recommande d'imprimer 
les pages web pour les relire avec attention. 

L' information sur le Web est parcellaire et ephemere. Elle doit souvent 
etre morcelee en plusieurs pages qui communiquent par les liens de 
navigation. C'est un echo au phenomene du zapping, avec la telecom- 
mande de la television. Le consommateur glane a droite et a gauche les 
informations qu'il desire. L'information est ephemere, ce qui donne du 
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Web, l'impression d'un chantier permanent. Ce n'est pas simplement ces 
panneaux "En travaux" ou autres sur les sites qui confortent cette 
impression, mais cette facilite de mise a jour, alors qu'un livre ne peut etre 
mis a jour qu'au gre de ses renditions. Une adresse de site ou de page peut 
devenir vide et inexistante tandis que des moteurs de recherche comme 
Google gardent l'archive de l'ancienne page, qui ressuscite au hasard 
d'une recherche par mots-cles. 

L'information sur le Web est imprevisible. Internet emploie de nombreu- 
ses metaphores pour decrire 1' experience de la connexion sur le Web : 
navigation, navigateur, surf, des termes qui depeignent un voyage sans 
but, une promenade au gre des liens et des idees qui traversent l'internaute 
et qu'il saisit dans le formulaire Google insere dans son navigateur. 

Hierarchisation de l'information 

Selon les etudes menees pour espionner le regard de l'internaute, il 
s'avere que la partie de l'ecran vue en premier se situe a gauche. Par 
consequent, l'information la plus importante se situe en haut de page, 
principalement a gauche, aux trois quarts de l'ecran, et occupe une place 
consequente, tandis que l'information la moins importante est situee en 
bas a droite. En se rendant sur un site de news, comme Google News ou 
Yahoo!, il est facile de verifier ou se situe la nouvelle qui saute aux yeux 
(voir fig. 1.2). 

Le choix judicieux des titres et intertitres contribue a la bonne compre- 
hension de la page en jalonnant le texte de reperes. L'utilisation de 
couleurs pour les titres ou en arriere-plan pour en distinguer les blocs 
ameliore le parcours du lecteur. Tout ce qui est facile, immediat et 
reconnaissable favorise la comprehension et l'approche d'un site. 
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Communication plus simple entre les machines 

Un langage norme peut sembler plus rigide. En fait, il a plus de souplesse. 
II est plus facile d'agreger plusieurs sources d'informations en syndica- 
tion. Par ailleurs, un tel langage se plie a tous les medias. Quand une 
grammaire est respectee, la mise en forme est plus previsible et done le 
contenu est plus facile a utiliser par des machines et des logiciels. Etant 
donne le volume d'informations exponentiel vehicule par Internet, il est 
naturel de structurer 1' expression pour en tirer le maximum de sens et 
aider les moteurs de recherche, qui sont Foutil indispensable a l'internaute 
pour trouver une information pointue dans cette masse de donnees. Le 
XHTML est base sur le XML, qui est en quelque sorte V esperanto 
informatique, un langage passerelle qui permet, dans un environnement 
heterogene, aux applications de communiquer entre elles. Le XHTML est 
previsible et il est done plus facile de systematiser des operations sur les 
donnees pour en tirer la substantifique moelle. C'est sans doute dans cette 
direction qu'ira une partie du developpement de lTnternet de demain. 
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1.10 Conclusion 

Le XHTML et les CSS promeuvent une autre pratique de l'ecriture et du 
graphisme au service de la communication avec les humains, a travers 
l'ergonomie et l'"utilisabilite", et entre les machines, par le moyen d'un 
code propre et d'un contenu bien structure qui "parle" a tous les 
navigateurs actuels. L'agencement de la couleur, la position des textes et 
des images, la distribution equilibree des liens hypertextes, un contenu 
ecrit pour l'ecran amenent clairement plus d'internautes sur certains sites, 
qui ont une vision a long terme et gagnent en visibilite sur la Toile. 
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Le site web est un outil qui sert a communiquer. Avant de le realiser, il est 
done essentiel de connaitre le public vise car ce dernier donnera 
F orientation de la charte graphique et le ton du contenu. Si vous vous 
adressez a une tranche 15-24 ans avec la musique rock comme theme, 
vous aurez un ton familier, avec le vocabulaire adequat, pour creer un lien 
immediat avec ce public. Le design d'un site parle immediatement au 
visiteur, mais il est le resultat d'un travail en amont. 

Le site est done au coeur d'un projet et le projet ne se construit pas au fur 
et a mesure de l'elaboration du site. Ce projet doit se voir au premier coup 
d'ceil, sur la page d'accueil. Internet relie des millions de sites ; il est done 
necessaire de se demarquer des autres sites par une intention originale et 
annoncer immediatement le contenu et le ton. 



2.1 Les types de sites 

II existe plusieurs types de sites selon l'objectif vise. lis demandent une 
charte graphique differente. Par exemple, le site vitrine est avant tout un 
travail de graphiste. Le contenu doit etre court et efficace, alors que le 
portail communautaire sera davantage centre sur l'interactivite. 

Les sites vitrine ou sites plaquette 

Les sites vitrine ou sites plaquette ont comme objectif de presenter une 
societe sur Internet pour des internautes qui ne connaissent pas la societe. 
lis contiennent quelques pages presentant les produits et services, la 
situation geographique, une page contact, des points pratiques (heures 
d'ouverture, plan d'acces...). Cette categorie de sites reprend souvent le 
graphisme de la plaquette de la societe et leur interactivite est restreinte a 
la page contact avec eventuellement un formulaire. 

Les internautes viennent y chercher une information precise s'ils connais- 
sent l'entreprise. lis peuvent decouvrir le site a travers un moteur de 
recherche parce qu'ils recherchent un produit ou un service local. Le site 
n'est pas destine a apporter toutes les informations mais a donner envie au 
visiteur d'en savoir plus en telephonant ou en rendant visite a l'entreprise. 
Le design doit etre agreable, clair, avec des polices faciles a lire, une 
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navigation classique et un acces simple aux pages, www.nexusdev.com 
constitue un exemple de site vitrine bien concu et complet. II est mis a jour 
frequemment et constitue une bonne vitrine pour la societe Nexus 
Developpement. 



http://www.nexusdev.com/ 
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Pour repondre a I'ensemble de vos besoins, nous nous appuyons si necessaire sur des partenaires metiers, 
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les nouvelles technologies Internet dans notre offre. 
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Actena, Maisans Berval, Transervices, Indicateur Bertrand, et bien d'autres, 




Les sites catalogue 

Le premier objectif d'un site catalogue est d'eviter, trivialement, l'envoi 
d'un catalogue par la poste. L'autre objectif est que le chaland voit 
immediatement les produits pour un achat d'impulsion. L'article ne sera 
pas achete sur le site, mais le visiteur pourra se faire une idee et se 
deplacer. Tous les echanges s'accelerent et le consommateur est sensible 
a la frustration, qui a comme effet qu'il ira voir la concurrence plutot que 
d'attendre. 
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Ces sites epousent la mise en page du catalogue de produits du magasin. 
Parfois, comme sur www . f euvert . f r, les pages sont feuilletees comme un 
catalogue papier. 



http://www.feuvert.fr/Content/services/produitSf " '9 OK IG^ _ X 




▲ Figure 2.2 : Le site de Feu Vert 



Le site catalogue ne permet pas d'acheter un produit en ligne. II doit etre 
ergonomique pour que le produit soit facile a trouver et ne necessite pas 
de feuilleter tout le catalogue. Les pages ont parfois tendance a etre 
lourdes, ce qui a pour effet d'agacer le visiteur. II est judicieux, en plus de 
classer les produits en de nombreuses categories, d'inserer un moteur de 
recherche avec plusieurs modes de recherche (mots-cles, categorie, 
reference produit, nom du produit...). La documentation des articles peut 
etre presente sur une page web ou un document a telecharger. Une foire 
aux questions (FAQ), avec un formulaire pour le SAV, pourront etre 
proposes. 
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Les sites d'information 

Les sites d'information approfondissent un theme et diffusant des infor- 
mations avec une visee professionnelle. Les pages doivent etre de- 
pouillees pour en faciliter la lecture, avec un beau graphisme restant sobre. 
Le design est la pour souligner le contenu mais c'est le contenu qui 
importe le plus. Les liens de navigation sont explicites. Un exemple de 
beau site d'information sur la typographic est www.planete- 
typographie.com. 



v>- -8 



I 



'P http://www.planete-typographie.com/ 
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Figure 2.3 : Le site Planete Typographie 



Les sites marchands 

Les sites marchands vendent directement leurs produits sur Internet avec 
la possibilite de payer en ligne ou par un autre moyen. Le design depend 
du type de produit vendu et de la ligne de marketing suivie. Un site qui 
construit toute sa publicite sur les prix va mettre en avant les promotions 
sur sa page d'accueil et tenir au courant les inscrits par un mailing 
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regulier, comme le fait www.bexley.fr. Un site comme www 
. outi 1 ssol ai res . com, qui presente des produits dans une niche et sans 
vraie concurrence, mettra plutot les nouveautes en avant et, parfois, se 
rapprochera d'un portail communautaire dans la mesure ou cette commu- 
nication entre les membres genere du chiffre d'affaires ou tout simplement 
par passion. 



Energie 
solaire 
dans 
I 'habitat 



Ompasarttx Distributers PV PLAN DU SITE 
Cnsuffajc 

BOUTIQUE dcs (Mm LE FOBUM 




Mars 2006 
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Les images sont extraites du programme de Visites de 
sites equlpes en energies renou velabtes'' en 
Franche- Comta. 

Voir Visites sur le site de I association AJEIIA 

Les trspace Info-Energle dans la plupart des regions 

orgamsent des visites de maisons equlpees de systemes 

solaires thermiques et photovoltaiques, de chaudieres boi: 

etdes maisons btociimattques. 

Voir las pages Regions arm de contacter un Espace 

Info-Energle ou une association pres de cher vous. 




▲ Figure 2.4: Le site Outils Solaires 



Les sites institutionnels 

Les sites institutionnels presentent l'organisation et leurs valeurs fonda- 
trices. lis ont un souci de clarte. La page d'accueil affiche generalement 
les dernieres nouvelles, avec une colonne de liens sur la gauche qui 
menent aux ressources sur l'organisation interne d'une part, et aux 
ressources di verses sur leur principal theme d' autre part. Le site de 
l'Unesco (http://portal .unesco.org/fr) en est un exemple. 
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▲ Figure 2.5 : Le site de VUnesco 



Les sites personnels 

Ces sites sont realises par des amateurs, pousses par leur passion pour un 
sujet. lis sont multiformes, divers et changeants. C'est le terrain d'expe- 
rimentation des developpeurs en herbe. Certaines de ces adresses, au fil 
des metamorphoses, deviennent des sites d'information ou des sites 
communautaires. Par definition, ils n'ont pas de forme definie et permet- 
tent la plus grande originalite, a l'image de http: / /l esmai ns . free . f r. 
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▲ Figure 2.6 : Le site Les Mains 
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▲ Figure 2.7 : Le site Agoravox 



Les sites communautaires sont des portails qui permettent a des internau- 
tes de partager un interet commun, avec beaucoup d'interactivite. lis sont 
faits par les internautes eux-memes, le webmaster n'etant la que pour 
animer et lancer une dynamique. Leur ambition est de reunir le maximum 
de passionnes et de devenir incontournables sur le sujet traite, comme 
Wikipedia http://fr.wikipedia.org/wiki/Accueil ou encore 
www.agoravox.fr. 
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A Figure 2.8 : Le site Wikipedia 
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Les sites intranet et les sites extranet 

Les sites intranet sont accessibles de l'interieur d'une entreprise ou d'une 
direction. lis ont pour objet la mise a disposition et le partage d'informations 
professionnelles. Leurs pendants sont les sites extranet sur le Web qui, grace 
a une authentification, permettent a des salaries d'une entreprise d'acceder a 
une interface personnalisee et d'administrer des informations. lis peuvent 
cibler les fournisseurs, les acheteurs, les commerciaux itinerants, etc. 

2.2 Quelques regies generates 

Le site doit etre centre sur l'utilisateur vise. Ses fonctions vitales 
(navigation, contenu...) doivent etre visibles pour toutes les configura- 
tions. L'internaute a peu de patience et vous le perdrez s'il fait face aux 
situations suivantes : 

■ II doit chercher oil cliquer. 

■ II ne voit pas des la premiere page le theme du site au-dela de son titre. 

■ Les caracteres sont petits et il ne peut les agrandir avec son navigateur. 

■ Les couleurs parasitent une bonne lecture. 

■ Le site est concu avec des couleurs fluorescentes et dissonantes. 

■ Une partie de l'ecran n'est pas accessible. 

■ La page est trop lourde a charger ou, pire, fait planter le navigateur. 

■ La page demande une extension du navigateur que le visiteur ne 
possede pas. 

Le concepteur du site se met a la place du visiteur lambda. L'ordinateur 
et la technique doivent se faire oublier pour que l'internaute se plonge 
dans le site et vive une vraie experience qui lui donnera envie de revenir. 

Nous allons prendre en exemple la realisation d'un site pour un gite rural. 

2.3 Le site 

Le but du site des Jardins d'Ecoute S'il Pleut est de se faire connaitre, de 
constituer un repere sur Internet pour les visiteurs qui le connaissent deja 
et enfin d'exposer la philosophie de l'entreprise, qui developpe trois 
poles : 
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■ les gites ; 

■ la pepiniere ; 

■ le conseil. 

La difficulte consiste a reunir ces trois activites sans qu'il n'y ait de hiatus 
entre elles. Le but est done de trouver une charte homogene, qui 
differencie cependant les trois poles. La gageure est ici de faire en sorte 
que chaque partie du site trouve son public, ou plutot que chaque public 
identifie bien ce qu'il vient chercher sur le site. 
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a Figure 2.9: Ecoute S'il Pleut 



2.4 Le public 

A qui le site est-il destine ? II s'adresse aux curieux, aux personnes 
indecises quant a leurs prochaines vacances, qui cherchent a passer un 
sejour convivial, au calme. II doit contenir de nombreuses photos et mettre 
en valeur le gite, l'accueil et les activites possibles dans les environs. Un 
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gite rural n'est pas different d'un hotel ; il est simplement plus convivial 
et cultive davantage la proximite. 




▲ Figure 2.10: tcoute S'il Pleut, gttes 



Le public a besoin d'etre seduit et rassure, de connaitre les proprietaries 
du gite, la region, les activites. Nous allons faire ensemble le site les 
Jardins d'Ecoute S'il Pleut (www.ardaee.com), un lieu qui conjugue 
horticulture, jardinage et accueil. L'accent sera mis sur le gite. 

Pour cibler les futurs visiteurs, il est interessant de creer des profils types 
et de dresser la priorite de chacun. Plusieurs profils sont envisageables : 

■ personnes ou families en recherche de gites accessibles aux handica- 
pes, portant le label "Tourisme et handicap" et "Gites de France", dans 
le cadre d'une ferme horticole ; 

■ personnes ou families en recherche d'un lieu d'accueil pour courts 
sejours de repos ; 

■ families britanniques ; 
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■ jardiniers, amateurs ou confirmes, interesses par la production de 
plantes vivaces, botaniques et rustiques, selon des methodes biologi- 
ques, et voulant decouvrir et partager les passions des hotes ; 

■ personnes en recherche d'aide ou d' informations sur le fioraison de 
jardin, ou sur des plantes vivaces, botaniques, rustiques ; 

■ personnes interessees par notre demarche de pluri-activites autour de 
la ferme horticole, de 1' association ARDAEE et de ses services 
d'ingenierie ; 

■ personnes interessees par l'environnement et le sud de la Vendee, avec 
forets, lacs, monuments, lieux de peche, vie culturelle. 

Le site devra done donner a ce public heterogene les informations qu'il 
attend et faire en sorte qu'elles soient aisement accessibles. 

2.5 La carte du site 

Elaborer la carte du site consiste d'abord a inventorier toutes les pages 
puis a les classer en les hierarchisant. Cette carte est une reflexion sur les 
objectifs du site et le contenu dont nous disposons. Ce travail s'elabore 
avec le client et permet d'estimer l'ampleur de la tache. 

Le site presente le lieu et sa region, les activites, les evenements annuels, 
les coins remarquables dans les environs, les restaurants, etc. 

Le principe est de commencer par la page la plus importante, celle que les 
internautes viennent visiter quand ils cliquent sur le lien qui mene au site 
ou quand ils saisissent l'adresse dans leur navigateur. Voici une photo avec 
une breve presentation du lieu (voir Figure 2.11). 

Le visiteur parcourt les pages du regard. II est important de hierarchiser 
l'information pour donner une direction a la navigation, en mettant le lien 
le plus important bien en vue, soit au-dessus des autres, soit a un endroit 
oil il sera repere en premier. 

Les liens repertories sont les suivants : 

■ Les gites : une page par gite ; 

■ Les pepinieres (methodes de production, plantes, vente) ; 

■ Conseil ; 
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a Figure 2.11 : 

Ecoute S'il Pleut, liens 



Notre pro jet 



Liens amis 



■ Contact ; 

■ Partenaires ; 

■ Liens amis ; 

■ Comment venir ?. 

Par la suite, la carte du site pourra evoluer, mais en l'etat, elle constitue 
une base pour facturer les services au client, le travail est facturer sur le 
temps evaluer pour realiser cette arborescence ; tout ce qui s'ajoutera par 
la suite sera facture en plus. 



2.6 Identifier le contenu semantique 



Chaque page contient un titre principal et au moins un autre secondaire. 
Sous un titre, quand le texte de la page est long, il est souvent utile de 
mettre un resume, introduisant les sujets evoques dans ce qui suit. 
L'article est entrecoupe de sous-titres. La page contient aussi un ensemble 
de mots-cles, qui aideront le visiteur a identifier les themes et permettront 
au site de bien etre reference par les moteurs de recherche. 



Un lieu magique 



Bieiiveime anxjardins d'econte s'il 
pleut 



< Figure 2.12 : 

Ecoute S'il 
Pleut, contenu 
semantique 



Diversite du paysage 



Situes dans le perimetre du massif forestier de 
Mervent Vouvant, Anne-Marie et Pierre-Jean vous 
regoivent dans leurs gltes en sud Vendee dont le 
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La navigation et la disposition 
des pages 

La barre de navigation doit etre visible et bien en evidence. Dans ce 
domaine, il vaut mieux rester classique car naviguer sur un site est un 
geste familier et ne doit pas devenir une quete du Graal. Certains sites sont 
tellement sophistiques que les liens de navigation se fondent dans 
F arriere-plan ou sont si peu conformes aux recommandations W3C que le 
navigateur confond les diverses boites di v, qu'il superpose sans vergogne. 

2.8 Choisir les outils 

Un outil gratuit qui simplifie la creation et la modification des CSS est 
TopStyle Lite. C'est la version gratuite de TopStyle Pro. Le logiciel est 
ergonomique et simple a utiliser. 

Trois types d'outils sont indispensables : 

■ un outil pour les feuilles de style ; 

■ des outils pour la couleur ; 

■ un outil pour l'icone. 

TopStyle Pro 

Ecrit par le createur de HomeSite, TopStyle est un bon editeur de CSS, qui 
manie bien le HTML et le XHTML. II est telechargeable sur www 
. bradsof t . com/downl oad. II existe des versions payantes et une gratuite, 
TopStyle Lite, qui possede une fonction de validation de style selon les 
differentes normes CSS (voir Figure 2.13). 

TopStyle Pro propose, en plus, des outils de validation de HTML et de 
XHTML Une fonction permet aussi de normaliser un code en un clic, avec 
la fonction de verificateur de mise a jour (Style Upgrade), en transposant 
les balises obsoletes (balises de police...) dans la feuille de style. La 
fonction de verification de style inspecte le style CSS en fonction aussi de 
la compatibilite avec les differents navigateurs. 

TopStyle accompagne en toute transparence les logiciels Dreamwea- 
ver MX et HomeSite. 
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▲ Figure 2.13 : TopStyle 



Master Styler 

Master Styler est un outil pratique pour manipuler le contenu des feuilles 
de style et identifier certains selecteurs. Les erreurs sont mises en evidence 
par un surlignage. Le resultat est visualise dans differents navigateurs, a 
condition que ces navigateurs soient installes. L'interface est ergonomi- 
que et agreable. II est telechargeable sur www.westciv.com/ 
styl e_master, avec une version devaluation qui devient payante un 
mois apres. 
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▲ Figure 2.14 : Master Styler 
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ColorZilla 

ColorZilla est une extension de Firefox, qui fournit une pipette pour 
copier le code d'une couleur sur le Web et qui peut aussi mesurer la 
distance en pixels entre deux points. C'est une icone qui s'affiche dans la 
barre d'etat, au bas de Firefox. ColorZilla est telechargeable sur 
https://addons.mozi! la.org/extens ions/moreinfo.php?id=271 



• ■ -: rr.:^fc.cf 1 ^t.iarai:os/nw«ri3(:*ip=y3=2?l 

^ Firefox Add-ons 

I Horn* Extensions Plugins Search Engines 




Newest 

Popular 

Top Rated 

All Extensions 
Bloggipg 
Bookmarks 

Developer 
Tools 
Download 
Tools 

Editing and 
Forms 

Entertainment 

Humor 

Image 

Browsing 

Kiosk Browsing 

Languages 



ColorZilla - Firefox Extension 



ColorZilla O.G.I , by Alex SI rota, released on February 10, 



Quick Description 
Advanced Eyedropper, 
CcdorPicker, Page Zoomer and 
other colorful goodies. 



Firefox 1. 

rediscover the «n 

a . r - P. r, 



With ColorZilla you can get a color 
reading from any point in your 

browser, quickly adjust this color and paste it into another 
program. You can Zoom the page you are viewing and 
measure distances between any two points on the page. The 
built-in palette browser allows choosing colors from 
pre-defined color sets and saving the most used colors in 
custom palettes. DOM spying features allow getting various 
Information about DOM elements quickly and easily. And 
there s more... 



Requires: Firefox: 0.9.x - l.Sjl^ 

a 



▲ Figure 2.15 : ColorZilla 



Colourificator 

Colourificator est une petite palette pour PC, dotee d'une pipette qui 
permet de recueillir n'importe quelle couleur affichee a l'ecran. Les 
couleurs sont codees en RVB et restituees en hexadecimal ou en 
pourcentage ou en valeurs de rouge, vert et bleu jusqu'a 255. La couleur 
peut etre ensuite copiee dans le Presse-papiers via un bouton. Cette palette 
peut etre conservee au-dessus des autres fenetres, y compris de la fenetre 
active. Ce petit logiciel est extremement pratique. II est telechargeable sur 
http://colourificator.sitekit.net. 
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-« Figure 2.16 : 

Colourificator 



EclipsePalette 



EclipsePalette est l'equivalent de Colourificator, avec une interface moins 
ergonomique et moins pratique, mais avec la possibilite d'eclaircir ou de 
foncer la couleur recoltee par la pipette. Un melangeur permet de creer un 
degrade entre deux couleurs. EclipsePalette est telechargeable sur 
www. greened i psesoftware.com/ecl i psepal ette.html 
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J=|Copy color 


Text to be copied to clipboard : 

#0A244A 







< Figure 2.17 : 

EclipsePalette 



Color Schemer 

Color Schemer est un logiciel qui se sert des lois de l'harmonie des 
couleurs pour proposer a partir d'une couleur, toutes celles avec lesquelles 
elle se marie bien. II est possible d'eclaircir ou assombrir une couleur pour 
creer un degrade ou d'avoir un florilege de couleurs. Color Schemer est 
payant et telechargeable sur www.colorschemer.com/download.php. 
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▲ Figure 2.18 : Color Schemer 

IconArt 

Pour avoir une identite graphique dans la barre d'adresse d'un navigateur 
ou dans la liste des favoris, il est possible d'inserer une icone de 16 pixels 
sur 16 sur le site en lui donnant comme nom favicon.ico. Pour creer ce 
genre d'image, il existe un certain nombre de logiciels. IconArt est gratuit, 
telechargeable sur www.conware-pro.com/products/ia. 
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Web Developer 

L'extension Web Developer de Firefox (https : //addons .mozi 1 1 a 
.org/extensions/moreinfo.php?id=60) est un outil interessant et 
indispensable. II permet de voir les coulisses des pages web et, entre 
autres, d' avoir un acces direct aux feuilles de style. Non seulement les 
styles deviennent visibles mais ils sont, en plus, modifiables, ce qui est 
interessant. Cette derniere fonctionnalite est necessaire car le developpeur 
peut voir comment une page a ete concue, modifier le code et voir 
instantanement le resultat sur le navigateur. II suffit de prendre comme 
etalon un site qui sert de reference et de le modifier. Une fois la feuille 
modifiee, elle peut etre enregistree. Evidemment, un site ne se construit 
pas ainsi, mais cette extension peut constituer une base modifiable qui 
evite de faire tout le code. La seule restriction est que certains sites mal 
concus ne sont pas bien affiches sur Firefox. 
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▲ Figure 2.20: Web Developer 
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2.9 Creer l'image du site 

L'image la plus importante est la banniere qui coiffe les pages. A partir de 
ses couleurs, il est possible de determiner les couleurs qui seront em- 
ployees sur les pages. L'image donne l'impression generale, a travers le 
fond et la structure de la page, la longueur des textes, l'agencement des 
boites, les filets de couleur, le type d'image. Ensuite le visiteur va 
decouvrir le site. II s'agit de seduire le visiteur pour qu'il reste puis 
revienne et participe a l'interactivite du site en se joignant aux forums, en 
envoyant son opinion ou des suggestions, en achetant des articles en vente 
dans la boutique. La creation du site commence par 1' elaboration sur une 
feuille d'un croquis, puis se poursuit par la creation d'un modele dans un 
logiciel graphique. Viennent enfin le decoupage de l'image et le rempla- 
cement de tout ce qui peut etre decrit par du code. 
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▲ Figure 2.21 : Elaboration 
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2.10 Batir le site 

Une fois la base etablie en HTML a partir de V image originelle, le travail 
consiste a affiner et a ordonner les differents codes, que ce soit la page 
elle-meme avec le XHTML ou la feuille de style, pour creer des 
documents qui sont de vrais outils, et non pas un chantier avec des 
echafaudages encore presents et des tonnes de materiaux en vrac. Le code 
soit etre lisible, non seulement par des machines, mais aussi par des 
humains, en particulier celui ou celle qui sera charge de rafraichir le code 
au cours des mois suivants. Une documentation sera la bienvenue pour 
eclaircir les fonctionnalites des differents outils et leur mode d'emploi. 



r LES CONTENEURS PRINCIPAL)/*/ 

riiiiiiiiiiiiiiiiiiiiiiiiri 

body { 

margin:0; 

padding:0; 

background:#233A00; 

font: 1 em Verdana, Arial, Helvetica, sans-serif; 
text-align: center; 

} 



a Figure 2.22 : Code 

Le code XHTML 

Grace a la balise div et aux feuilles de style, il est possible de choisir ce 
qui sera affiche en premier. Le principe du XHTML est celui du flux. II est 
done possible de positionner des boites dans le flux, e'est-a-dire selon 
l'ordre lineaire du code, ou en dehors du flux, d'une maniere absolue, au 
pixel pres, ou relative par rapport aux autres boites. 

La feuille de style 

Pour batir la feuille de style, le developpeur definit en premier lieu les 
balises les plus generiques, qui vont fournir les proprietes par defaut, puis 
il s'occupe des details. 
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II commence par definir le selecteur body dont heriteront les autres 
balises. Puis on declare les selecteurs de moindre portee avec leurs 
proprietes. 



/* LES CONTENEURS PRINCIPALS*/ 

/*/////////////////////////*/ 

body { 

margin:0; 

padding:0; 

background:#233A00; 

font: 1 em Verdana, Arial, Helvetica, sans-serif; 
text-align: center; 

} 

/* ON ENTRE DANS LA MARINE*/ 

riiiiiiiiiiiiiiiiiiiiiiiiri 

#navigation { 
background:#255899; 
font:1.5em; 
text-align: left; 
J 

▲ Figure 2.23 : La feuille de style 

Au fur et a mesure, le developpeur sculpte sa feuille de style, c'est-a-dire 
qu'il donne un aspect general a sa page web, la visionne, puis affine peu 
a peu au niveau des balises de lien de navigation, rectifie les desordres 
causes par une ligne de code inappropriee. Ensuite, il constrait les classes 
pour des parties particulieres de ses pages ou pour nommer un contenu. 
Ainsi, il definira le style des pieds de page, avec les proprietes de couleur 
et les caracteristiques des polices. Pour agir sur un element et lui donner 
un comportement, il l'affecte d'un identifiant. Enfin, pour donner du 
dynamisme et du mouvement, il utilise les pseudo-classes comme 
a: hover, pour que les liens modifient la couleur au passage de la souris. 
Par la suite, la feuille s'enrichira. Elle pourra aussi se diviser en plusieurs 
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feuilles pour materialiser des aspects differents ou s'adresser a des medias 
differents. Les feuilles de style secondares seront importees dans la 
feuille principale. 




▲ Figure 2.24 : Les liens 



Une feuille de style est un document qui se doit d'etre lisible pour faciliter 
les modifications qui ne manqueront pas de survenir. 

L'elegance d'une feuille de style consiste en deux aspects : 

■ bien communiquer sur la feuille par l'insertion judicieuse de commen- 
taires explicites, par des lignes blanches entre differents groupes, par 
des lignes de moins de 80 caracteres ; 

■ concevoir la feuille avec elegance, c'est-a-dire appliquer des simpli- 
fications, des astuces pour court-circuiter du code "bavard". 

Pour inserer des commentaires, il suffit de les placer entre /* et */. 

/*Ceci est applique sur toutes les listes de la page*/ 
li { 

font-size: 0.8em; 
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} 

/*Ceci est uniquement applique sur les listes numerotees de notes*/ 
li. notes { 

ol { 1 i st-style-type: lower-alpha } /* a b c d e...*/ 

} 



La communication se fait a Fadresse du developpeur, qui doit se retrouver 
dans son code plusieurs mois apres. La presentation etant separee du 
contenu en deux fichiers distincts, il est malaise de rechercher dans le code 
source de la page la classe ou l'identifiant. II s'agit de rendre la tache plus 
facile au developpeur qui succede au createur de code. 

Les eta pes 

Pour la construction d'une feuille de style, le developpeur fait une sorte de 
zoom avant, c'est-a-dire qu'il definit d'abord les grandes lignes comme 
les differentes zones pour lesquelles il utilisera des boites. Dans chaque 
zone, une impression d'ensemble preside, constitute d'un arriere-plan, 
d'une police de caracteres ou parfois d'un interlignage different. Le site 
imagine commence a prendre corps. Le developpeur joue avec l'heritage, 
en definissant des caracteristiques de toute la page, puis surcharge certains 
selecteurs et proprietes pour certains details. La page s'affme. 




La surcharge 

La surcharge dans les langages objet est basee sur la notion 
d'heritage. Si une propriete est definie dans un selecteur comme 
body, tous les selecteurs enfants de cette balise en heriteront. Ainsi, 
quand la valeur de la propriete font-size est lem, toutes les balises p 
beneficieront a leur tour de cette valeur par defaut. Seule la surcharge 
de cette propriete permettra de modifier cette valeur en la declarant 
dans le selecteur p avec une autre valeur. 



Le developpeur a deja defini les differentes parties de la page avec 
precision. II sait qu'il y aura des liens de navigation, des liens d'incise (a 
l'interieur des textes) et des liens de reference (a la fin d'un texte) et qu'ils 
auront tous un aspect different. Alors sa feuille de style va se creer comme 
une enumeration des differents selecteurs et proprietes. Ensuite, il 
implemente les differentes classes et identifiants dans ses balises XHTML. 
II lui faudra, bien sur, ordonner ces codes CSS, les presenter, en un mot 
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les rendre lisibles. II pourra tester un selecteur supplemental puis 
Finvalider en le mettant en commentaires. Une fois le code arrete, il ne 
reste plus qu'a le nettoyer, le simplifier, voir ce qui peut etre enleve sans 
provoquer de dysfonctionnement dans la presentation. 



/* LES CONTENEURS PRINCIPALS*/ 

/*/////////////////////////*/ 

body { 

margin:0; 

padding:0; 

background :#233A00; 

font: 1 em Verdana, Arial, Helvetica, sans-serif; 

text-align: center; 

} 

div#contenu { 

background:#ffffe1 ; 

background-repeat:no-repeat; 

background-position:top left; 

background-image:url("images/haut.gif ); 

max-width: 770px; 

margin: 10px auto 0 auto; 

text-align: left; 

border: 1px solid #233A00; 

padding: 0; 

} 



▲ Figure 2.25 : La surcharge 

La validation 

Une fois la feuille de style creee, il est necessaire de la tester dans tous les 
navigateurs du marche, ou au moins les plus courants. 

Pour vraiment etre complet, il faudrait avoir un PC Windows, un 
Macintosh et un PC Linux afin de tester l'affichage sous differentes 
systemes d' exploitation et differents navigateurs et de voir ainsi le site 
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sous toutes les coutures. Mais avoir plusieurs machines est couteux pour 
un individu. Certaines societes de developpement web en arrivent a cette 
extremite. 

Les utilisateurs de Macintosh peuvent emuler un PC sur leur machine et 
done installer Windows et utiliser tel ou tel navigateur web. II semble, en 
revanche, que la puissance est attenuee par rapport a un vrai PC. Cette 
solution, d'autre part, entraine des frais. 

II est possible de verifier un site sur d'autres machines, chez des amis, 
dans des cybercafes ou d'autres lieux publics, mais il ne s'agit la que 
d'une phase de verification, et non de validation pendant laquelle il faut 
pouvoir modifier le code et voir le resultat en temps reel. 
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a Figure 2.26 : {capture 
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teCapture 




I J 

▲ Figure 2.27 : iecapture 

Les utilisateurs de PC peuvent visionner leurs pages web telles qu'elles 
s'afficheront sur un "Macintosh", grace a www.danvine.com/icapture. 
Sur ce meme site, sur la page www.danvine.cotn/iecapture, il existe un 
emulateur pour de nombreux navigateurs, mais cette page est la plupart du 
temps hors service, sans doute depassee par son succes. 




▲ Figure 2.28 : browsercam 



II existe quelques emulateurs payants sur Internet, www.browsercam.com 
en propose un qui peut etre utilise gratuitement pendant 24 heures, pour 
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faire jusqu'a deux cent captures. II montre le rendu d'une page sur 
differents systemes d' exploitation et navigateurs. C'est encore la solution 
la plus rationnelle. II est possible ensuite de valider le code sur le site 
http://val idator.w3.org/. 
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▲ Figure 2.29 : validator 



La fonctionnalite du site 

II reste a savoir si le site fonctionne bien, e'est-a-dire s'il communique 
bien, si l'intention premiere est respectee, si chaque fonctionnalite est 
clairement percue, si le principe de navigation est compris, si la lecture est 
aisee pour tous (categories socioculturelles, deficients visuels, cultures 
minoritaires, etc. selon la cible). 

Si le site propose des liens non soulignes, ils doivent etre assez evidents 
pour que le visiteur sache qu'il peut cliquer dessus. Si une information est 
importante, il est peu judicieux de la placer en bas de la page a gauche. 
Elle serait mieux disposee en haut a gauche ou a hauteur des yeux. Les 
mots sibyllins associes a des liens ne poussent pas les internautes a visiter 
la page pointee. II vaut mieux etre explicite et utiliser a dessein la balise 
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title dans les liens. Le manque de contraste entre le texte et le fond de 
page rend toute lecture difficile car l'ceil a besoin d'un bon contraste pour 
discerner des caracteres (affiches en pixels qui plus est). Certaines 
couleurs ne sont pas vues par les daltoniens. II vaut mieux eviter qu'elles 
aient une signification dans les fonctionnalites du site. En d'autres termes, 
il faut proscrire des liens rouges et des liens verts qui orienteraient les 
visiteurs, respectivement, sur une page du site ou la page d'un site externe. 

4^ | •* Figure 2.30 : 
Contact Lien Contact 



II existe plusieurs moyens de savoir si un site communique bien. Tracer le 
visiteur au long de sa deambulation, en creant une session et en la 
stockant, aide a analyser le parcours type et a determiner les parties du site 
ignorees. Le sondage peut aussi aider a comprendre les details a ameliorer. 
La page Contact est encore le meilleur moyen d' avoir un echo des 
visiteurs. II ne faut pas hesiter a les inviter a faire part de leurs opinions 
et des difficultes qu'ils rencontrent dans la visite du site. Une phrase dans 
le pied de page avec un lien e-mail est une bonne idee. 

Le bon referencement 

Si le site est en XHTML et en CSS, il sera deja plus facile a referencer. 
Pour qu'un site soit reference, il doit reunir plus de cinq pages et avoir de 
nombreux liens qui menent a lui, selon Google. 

inscription 

L'inscription se fait directement sur le site des moteurs de recherche. Des 
que le site est fini, il faut se rendre sur Google, Yahoo!, etc. et soumettre 
l'adresse URL creee (voir Figure 2.31). 




, Les moteurs de recherche regionaux 

Pour etre bien reference, il vaut mieux se metier de la diversite 
des langues prises en charge par les differents moteurs de 
recherche. Le referencement dans une version n'entrame pas automa- 
tiquement le referencement dans les autres versions du mime moteur 
de recherche. 
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>•» » o « C't 

Google US 



Pour ajouter ou mettre a jour I'URL d'un site 

Chaqua fort qua nam •■ptoroni I* Wao, noui antKhttioni nolra near an y ?rt»*n*l" n ** 

: l« nouvaau. UK al »1 "Hat • iOUf da «ai oaja .aptrtorlai ll vow t annerie „ a^.,, cortatoondart a 

a toumaNra PURL 4* votr. t*. nous vous tugaOront tfuMsar c.n. ^ CHMm ^ ,„ vlM , UII J 

■ P«9» rw.n«,oo( 0 o*p«*y«* m * l q U .^ni a . 1 « n ol.. Ma, to. M ,p, DW# , d H t , Mw .O>WP«n l 

» --« m" .i •*•«« * MM <M nous pMvt.nn.rl par cortt.gu.rt now na pouvons n. c# con|#nu _ „ ^ ..^ 

annoncar m garanh. rndwlon d. voir. si. pubKBM. Pom *n savol. pbs 



EntiM r a* til* URL complata d. vott. sH«, y compels I. prafoa " hHpJ/ ■■ nam 
las gullem.isr par aitmpla : htlpVAvww g0o9tt.com Dam t* chomp 
• Com 
Mini 

1* al 1*1 moli ctat ipaciftai lont toMdai .icknlvwn.nl pour 
information ; Hi rflnAu.nc.nl autun.m*nt f indaiatlon ou rutlliioiion d* vol pagas 

pa 

R.marqua : Sp.cm.z uniquamanl njRL a. I* paga daceua*. n nail pas ntcatiMra d. toumatlra tat URL dat drr.rtntat 
pagat da volra tfta ; an alfal notia »iplorat.ut da Wab (Googlabol) *a charga tf idanbAar e.Mas-ci important - Googl. m.t a 
Jour ton lnd»« aulomatlquam.nf at a int.rvafl.s r .gullets . par cons.quanl. II n'.it pas n.c.nair. da noui slgnalar tat 
nouvaaux Hans ou lat tarn partmts da voir. sit. itas Harts partmas ou sans clbla dlsparaitroni da noli. mO.« lors d. notr. 
procfiam. exploration du Wab calla-cl s accompagnanl toujour) da la mis. a Jour In 



ir Google. 



lift* am AdWordt A vac un patarnart pat 
carta da ctadtt, vout pouv.z voir voir. 

Qoogl* d.i aujourrfhul 



URL : 

Commantair.t 



- 



Pour nout aidar a drstingirar Mi URL indiquta* manu.lt.m.nt da < alias tourMiat automaltquamart , arriraz la 
mot lal qui appat.it dans la zona ct-dastous 



Pour supprtmer du conlenu de I'lndex Google 

Google net a put ion Tifre. nij1c--na' ^tuit lit el a nletvalle-. re jmats Lot t qua fioj; eiplnrcfin le l/i'.fc, r 



1 



Figure 2.31 : Inscription Google 



Tab. 2.1 : Les pages de soumission de site sur les moteurs de recherche 


Yahoo! 


http://fr.search.yahoo.com/free/request 


Google 


www.googl e. f r/addurl /?hl =fr&continue=/addurl 


Voila 


http://guide-voila.search.ke.voila.fr/Soumission/ 



MSN 



http : //search .msn . f r/docs/submi t . aspx? F0RM=WSDD2 



Le site doit etre fini et en ligne pour etre soumis, sinon le webmaster 
s'expose a un echec. Une fois l'operation effectuee, il faudra compter 
entre deux et huit semaines avant que le site n'apparaisse dans l'index. 
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- 9 


< 


*\^HOO! SEARCH Yahooi 


5- Ayyda 




Suglere tu sit 10 






Escribe la direction de la paglna web (URL) complete Incluyendo hltp // (por ejemplo. 
htlp^AwAv yahoo.*s) del sltlo que deseas sugerir. 

Si lo deseas puedes indicarnos un feed en aiguno de nuesttos formatos Reconocemos 
ficheios con extension gz como ficheios comprimidos que seran tratados y analizados 






• Rss 0 Q R l "iS 1 0 o RS 1 ^ *> 0 nor pipmnln TNN Ton stories 

• Atom 0.3. poi ejemplo. Yahoo! Search Blog 

• Un fichero en formalo teato que conlenga una lista de URLs en el que cada URL debe 
de ser una nueva linea. El nombre del fichero debe ser urltistlxl; para un fichero 
comprlmldo debe ser urillst.txt gz 






Escribe la URL de su feed; hap// j 






| Submit Feed | 






PuttUt M0 runs [ dijir i.i .r-'.j i.dt.j |j ml j./a- r iu'=. 






Escribe la URL de la pagina que quieres que incluyamos: 

hnp^ I Sugerir URL I 






Para suaem una URL Ive sea en forma directs o a troves de un feed! nuestro motor de busoueda 
obtendrs enlaces para encontrar e incorporar pamas que hasta ahora no formaban parte de nuestro 
buscador We ml automatically dated updates on pages and remove dead links on an ongoing basis 






Jai) ■ • ;< Kn>tio ■ EijIuMdot It ji|io> E>r > . - . 

LtpHIOhl C'?3* '.tlUL' 1 I. L Ti...l.. : . I..: rj r - c , ■, ,; T t)lf <lll)0! 







a Figure 2.32: Yahoo! Espagne 



Le bon positionnement 

Ensuite, le but du webmaster est d'avoir son site bien positionne. II doit 
apparaitre dans les trois premieres pages de resultats d'une recherche sur 
tel ou tel mot-cle. Le but d'un moteur de recherche est de fournir une 
reponse exhaustive et pertinente a toute requete de l'internaute arm de 
fideliser ce dernier, de s' assurer qu'il revienne faire ses recherches et 
visualise par la meme des encarts de publicite. II est done important de 
bien definir le theme et les sous-themes et de les reporter dans les 
mots-cles et la description du site. 

Les balises meta 

Voici une liste des nombreuses balises meta. Elles ne sont pas toutes 
indispensables. 

■ <ti tl e>100 caracteres maximum (y compris les espaces) sans pas- 
sage a la /igne</titl e> ; 
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■ <meta name="description" content^ " 150/200 caracteres maxi- 
mum (y compris les espaces) sans passage a la ligne." /> ; 

■ <meta name="keywords"content="7 000 caracteres maximum (y 
compris les espaces). Les 400 premiers seulement sont pris en compte 
le plus souvent par les moteurs de recherche. 100 mots maximum 
sinon Vauteur peut etre pris pour un spammeur." /> ; 

■ <meta name="abstract" content="Br<?/ resume du site. Peu usite. 
200 caracteres maximum." /> ; 

■ <meta name="author" content="Le nom de Vauteur du site" /> ; 

■ <meta name=" copyright" content="L<? nom et la date du copyright 
du site" /> ; 

■ <meta http-equiv="Content-type" content="text/html ; 
charset=iso-8859-l" /> ; 

■ <meta name="l anguage" content="fr" /> ; 

■ <meta http-equi v="Content-Language" content="fr" /> ; 

■ <meta name="robots" content="i ndex, FOLLOW" /> ; 

- N0F0LL0W : ajoute cette page uniquement au moteur de recherche. 

- NOINDEX : supprime cette page du moteur de recherche. 

- Al 1 Content : ajoute toutes les pages au moteur de recherche. 

■ <meta name="revisit-after" content="30 days" /> ; 

■ <meta name="reply-to" content=" webmaster® lesite.com" /> ; 

■ <meta name="identif ier-url" content=" 'http://www.lesite.com/" 

/>; 

■ <meta name="subject" content="Le theme du site" /> ; 

■ <meta name="expires" content="never" /> ; 

■ <meta name="publisher" content='Wom de I'editeur du site" /> ; 

■ <meta name="location" content="France, FRANCE" /> ; 

■ <meta name="rating" content="general " /> ; 

■ <meta name="category" con tent ="une_categorie" />. 

Les balises meta les plus utiles sont keywords et description, qui sont 
lues par les robots et utilisees par les moteurs pour repondre a une 
recherche. Le rang depend de la pertinence, qui se determine en fonction 
des mots contenus dans le titre, dans l'URL, dans la page elle-meme. 
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Des generateurs de metatags existent sur Internet (www.toulouse- 
renaissance.net/c_outils/c_meta-tag_test.htm ou www 
.referencement-fr.com/generateur_metatags par exemple). 



General cur <te mcttttgi 



, : »i MB* Mil WO 



■ 
® 



A Figure 2.33: Generateur de metatags 



Les mots-cles comme decor 

La bonne idee pour etre bien reference est de mettre sur la 
page une boTte avec des mots-cles, de sorte qu'ils figurent dans 
la page elle-meme. Cette boTte peut etre aussi un bon moyen pour 
rappeler au visiteur les themes du site et de la page, comme une 
illustration. La police et le fond peuvent etre suffisamment esthetiques 
pour servir de decor. 




_ Figure 2.34 : Bottes a mots-cles 
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Robots.txt 

robots.txt est un fichier texte place dans le repertoire public pour indiquer 
aux robots qui ecument le Web oil ils sont autorises a fureter. 



Des sites, comme http://outils.enaty.com/outils/generateur- 
robots.php, existent pour vous aider a creer ce fichier. 



Tab. 2.2 : Exemple de fichier robots.txt 


Code 


Signification 


User-agent: * 


Permet aux robots de visiter le site. 


Disallow: /secret / 


Interdit aux robots de visiter ce repertoire. 


Disallow: /secrets. htm 


Interdit aux robots de visiter cette page. 


Disallow: /coul i sses/i ndex.php 


Interdit aux robots de visiter cette page 
dans ce repertoire. 



Ce fichier robots.txt demande aux robots fouineurs de ne pas indexer les 
repertoires secret, tmp et le fichier index.php dans le repertoire coulisses. 
Chaque fois qu'un robot visite un site, il commence par chercher ce fichier 
pour savoir ce qui ne doit pas etre indexe dans le repertoire web. 



*•••». 
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▲ Figure 2.35: Ginerateurdufichierrobots.txt 
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Internet n'a rien invente 

Dans le repertoire secret, mettez les fichiers qui ne regardent personne, 
mais qui doivent vous etre accessibles sur le Web. Aucun lien n'y mene et 
ils sont securises par le fichier robots.txt situe dans le repertoire www ou 
htdocs ou public _html. 



Site Distant : ■ /www/ 


Norn 


Taille 


Type 


Date 


d mentions.php 


10566 


Fichier PHP 


11/10/2005 


B menu.css 


1272 


Document de feuille .. 


17/09/2005 


rf mercLachatphp 


8497 


Fichier PHP 


11/10/2005 


j nrierci_contact.php 


11104 


Fichier PHP 


25/10/2005 


d panier.php 


5202 


Fichier PHP 


03/10/2005 


j presentation. php 


9B43 


Fichier PHP 


11/10/2005 


j produit_popup.php 


9346 


Fichier PHP 


02/10/2005 


j produitl.php 


19607 


Fichier PHP 


11/10/2005 


j promo. php 


7462 


Fichier PHP 


12/12/2005 


M promo, php. LCK h> 


44 


Fichier LCK 


12/12/2005 


u ■ mm 


183 


Document texte 


27/03/2006 



A Figure 2.36 : Arborescence 

II vaut mieux ne pas y mettre des fichiers trop secrets car certains robots 
ne respectent pas les commandes de robots.txt. Par ailleurs, il n'y a pas 
que des robots de moteur de recherche sur le Web... .htaccess est un 
fichier beaucoup plus securise pour Apache, mais c'est une autre histoire. 

Echanger des liens 

Le nombre de liens sur le Web qui menent a un site lui font gagner des 
places sur les pages des moteurs de recherche. II est done judicieux de 
creer une page avec des liens vers d'autres sites sur des sujets comple- 
mentaires ou sur le meme sujet. Si l'un des sites qui proposent des liens 
vers votre URL est bien reference, vous le serez aussi par ricochet. II est 
aussi interessant d'inciter les visiteurs a faire un beau lien vers votre site 
en leur proposant une page avec differentes tailles de bannieres et de logos 
ou des portions de code a inserer sur leur propre site. 

2.1 1 Internet n'a rien invente 

Internet a introduit la rapidite et surtout l'interactivite dans la communi- 
cation electronique. Mais Internet n'est pas qu'une communication, c'est 
aussi une expression qui repose sur la culture de l'ecrit et sur tous les 
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progres realises depuis Gutenberg. La maniere de lire n'a pas reellement 
change car la maniere d'ecrire n'a pas change. Quelques amenagements 
sont necessaires pour s'adapter a l'ecran, mais le substrat d'Internet est le 
livre et la maniere de presenter l'ecrit pour le rendre plus lisible, plus 
comprehensible et plus agreable. Tout l'acquis que l'ecrit a eu le temps 
d'emmagasiner et d' experimenter par l'imprimerie et la mise en page, 
jusqu'a la PAO, est a la disposition du createur de site web. Une bonne 
connaissance des techniques utilisees dans le passe est un atout pour creer 
un beau site harmonieux. C'est ce que nous allons etudier dans le prochain 
chapitre. 
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Les regies de mise en page, meme si elles sont differentes pour l'ecran et 
pour le papier, ont garde le meme socle pour assurer la lisibilite, 
l'harmonie de 1' ensemble et la mise en valeur de certaines parties plus 
importantes. Le regard humain, quel que soit le support, se pose d'abord 
aux deux tiers de la page. II est done important de connaitre quelques 
bases avant de s'attaquer a la feuille de style elle-meme, qui n'est qu'un 
outil au service d'un savoir-faire. 




titre 

lei e'est I'accrochelci e'est I'accroche 
lei e'est I'accrochelci e'est I'accroche 



i k les 



rex le teste 



tici e'esst It- tf xttici c est It texte 
iici c 'est le texteici e'est le texte 
ad e'est le Ib i If hi e'est le texte 
:i e'est le texteici e'est le teste 



Figure 3.1 : Hauteur de la lecture 



3.1 Le texte 

Depuis Gutenberg, les caracteres d'imprimerie se sont diversifies. Chaque 
police de caracteres a une personnalite, mais la politique pour une mise en 
page a l'ecran est de rendre le texte lisible tout en veillant a son elegance 
par rapport a l'ensemble. 




Le blanc qui parle 

C'est I'equilibre entre la surface imprimee et le support - qui, 
en typographic, est le papier blanc. Concourent a cet equilibre les 
polices et les corps, I'interlignage, les gouttieres entre les colonnes et 
les blancs tout autour de la surface imprimee. L'objectif est d'atteindre 
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une harmonie de proportions entre I'impression et la surface 
de la page. La premiere est la masse noire et la seconde est 
la masse blanche ; elles rivalisent pour donner un gris qui est la 
dominante de la page vue de loin et qui tire plus ou moins sur le noir ou 
sur le blanc. C'est le blanc qui donne sa respiration a I'ensemble. 



Le francais a des regies typographiques differentes de celles de l'anglais. 
Le role de cet ouvrage n'est pas de les passer en revue (d'excellents livres 
le font), mais simplement de donner quelques bases. 



le TftondeiE-il 




< Figure 3.2 

La une du 
Monde 



En francais, par exemple, il est normal d'accentuer les capitales. 



Tab. 3.1 : Accentuation des capitales 


Exemple 


Question 


LES ENFANTS LEGITIMES 


LEGITIMES ou LEGITIMES? 


L'AUGMENTATION DES RETRAITES 


Des RETRAITES OU des RETRAITES ? 
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Tab. 3.1 : Accentuation des capitales 


Exemple 


Question 


LE PALAIS DES CONGRES 


CONGRES ou CONGRES? 



L'ETUDE DU MODELE 



L'ETUDE DU MODELE ou DU MODELE ? 



Emploi des mots en capitales 



I est plus malaise d'accrocher le regard avec une phrase en 
capitales car les lettres perdent hampes et jambages. 

Les lettres sur un ecran sont inscrites sur un blanc ou une autre couleur 
lumineuse et elles apparaissent plus petites que sur du papier. 

Les differents types de polices 

Sur le Web, les polices sont classees en plusieurs categories : 



Tab. 3.2 : Les differentes categories de polices 




Description 


Serif 


Police dont les caracteres ont un empattement (Times 
New Roman). 


Sans-serif 


Police dont les caracteres sont sans empattement 
(Arial). 


Cursive 


Police imitant I'ecriture manuelle (Monotype Corsiva). 


Fantasy 


Police decorative (Comic Sans MS). 


Monospace 


Police dont la chasse est identique quelles que soient les 
lettres (Courier New). 



Des polices ont ete faites specialement pour le Web : Tahoma et Verdana 
(sans-serif), et Georgia (serif). 

Pour les autres polices, l'interlignage doit etre de 1 ou 2 pixels de plus que 
la taille de ces polices. 
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▲ Figure 3.3: Hauteur de la lecture 



Tab. 3.3 : Les differentes proprietes de font 




Description 


Valeur 


font-style 


Definit I'orientation du texte. 


Normal , i tal ic 


font-variant 


Affichage du texte en petites 
capitales. 


Normal , smal 1-caps 


font-wei ght 


Definit la graisse du texte. 


Normal , bol d, bolder, 
1 ighter, valeur 


font-size 


Definit lataille du texte. 


Taille, pourcentage 


1 ine-hei ght 


Definit la hauteur de ligne. 


Taille, nombre, pourcentage 


font-stretch 


Definit la largeur des caracteres. 


Normal, wider, narrower, 

ultra-condensed, condensed, 

semi-condensed, 

semi -expanded, expanded, 

extra-expanded, 

ul tra-expanded 


font-f ami ly 


Definit la famille de police a 
utiliser. 


Nom de la police, nom 
generique d'une police 



Taille absolue ou relative 

Le choix de l'unite de la taille depend de la philosophic du webmaster. S'il 
prefere controler sa page, il choisira des unites de mesure absolues. S'il 
veut accorder plus de libertes a Futilisateur, les valeurs relatives convien- 
dront parfaitement. Internet Explorer ne permet pas d'ajuster la taille des 
polices fixes a la vue. Comme Internet Explorer est utilise par environ 
80 % des internautes, il est preferable de recourir a des unites de mesure 
relatives. L'objectif d'un site web est de pouvoir etre vu par le maximum 
d'internautes ; si le visiteur est interesse par le theme du site et s'il ne peut 
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lire le texte parce que la taille de la police est trop petite, il sera frustre et 
ne reviendra pas. 




▲ Figure 3.4: Diffe rentes tallies de police 



Tab. 3.4 


: Unites de mesure 












Correspondance 






Exemple 


Type 


In 


2,54 cm 


in 


Decimal 


2.7in 


Absolu 


Cm 


1/100 de metre 


cm 


Entier 


4cm 


Absolu 


Mm 


1/1 000 de metre 


mm 


Entier 


20mm 


Absolu 


Point 


1/72 e de pouce 


pt 


Entier 


12pt 


Absolu 


Pica 


12 points 


pc 


Decimal 


2.3pc 


Absolu 


Pixel 


Unite de definition de 
I'ecran 


px 


Entier 


5px 


Absolu 


Em 


Hauteur du M dans la 
police utilisee 


em 


Decimal 


2.45em 


Relatif 


Ex 


Hauteur du X dans la 
police utilisee 


ex 


Decimal 


4.5ex 


Relatif 




1 em 




Entier 


110% 


Relatif 



Comme vous l'avez remarque, dans les exemples de code, aucun espace 
ne separe la valeur de l'unite de mesure. 



C'est le point, et non la virgule, qui determine les decimales. 
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Tab. 3.5 : Les valeurs nominales 




Traduction 


xx-smal 1 


Minuscule 


x-smal 1 


Tres petit 


smal 1 


Petit 


medium 


Moyen 


1 arge 


Grand 


x-1 arge 


Tres grand 


xx-1 arge 


Geant 



La taille depend de la configuration systeme de Futilisateur final. Ces 
differentes tailles conventionnelles sont interpreters differemment selon 
les navigateurs, la definition et la taille de l'ecran et en fonction des 
polices dont le systeme dispose. Par exemple, medi um correspond a 12 pt 
et large a 14.4 pt en theorie. Netscape choisit small comme taille par 
defaut, et Internet Explorer med i um. Le resultat apparait done aleatoire. Si 
ce systeme est base au depart sur une bonne idee, il aboutit en pratique a 
des mesures approximatives. 

CORPS 24 

arial 

Times new Roman 
Georgia 

Palatino linotype 
Comic sans MS 
Tahoma 
Verdana 

▲ Figure 3.5 : Differentes polices de 24 points 
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Un exemple de taille relative 



Pour s'adapter parfaitement a l'ecran d'un ordinateur, il serait ideal de se 
servir du pixel comme unite car le caractere changerait de taille selon la 
definition de l'ecran. Mais cette option presente deux inconvenients 
majeurs : 

■ Internet Explorer ne permet pas d'agrandir le caractere. 

■ Sur Macintosh, le pixel mesure environ un tiers de plus. L'ecran 
Macintosh est de 72 dpi tandis que celui d'un PC est de 96 dpi, ce qui 
rend la meme police sur Macintosh plus petite. 

Les unites de mesure en em ou en pourcentage apparaissent plus adequa- 
tes. II serait possible aussi d'utiliser les mots-cles, mais ils n'autorisent pas 
la precision que donnent les em ou les pourcentages. 

Vous devez considerer la page HTML comme une serie de conteneurs. Ils 
se cotoient ou s'emboitent comme des boites gigognes. Ici nous avons une 
notation relative. C'est la que l'appellation "en cascade" prend toute son 
ampleur. 



#contenu 

font size: 1 em 



•* Figure 3.6 : 

Heritage 
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En fait, un conteneur herite des proprietes du conteneur qui le contient. Le 
conteneur qui contient la page et tous ses conteneurs est la balise body. 
Ainsi la propriete font-size de body sert d'etalon a toute la page et a 
tous ses conteneurs. 

1 em correspond a la taille par defaut des navigateurs, c'est-a-dire a la 
taille medi um de la police courante, qui est en general de 16 pixels. 

Pour l'affichage d'une police de 10 pixels environ, la propriete font-si ze 
du selecteur body prend la valeur de 0.625 em, c'est-a-dire la valeur de 
10 pixels divises par 16 pixels. 

body {font size:0.625em} 

Avec cette ligne, l'unite em est reglee sur 10 px et desormais tout ce qui 
est etalonne le sera par rapport a cette mesure. Ainsi 10 px correspondront 
a 1 em. Ce type de calcul rend plus facile l'attribution des valeurs car 
10 est un chiffre rond. Pour 12 pixels, la valeur deviendra 1.2 em, et 
1.4 em pour 14 pixels. 

Prenons un exemple : 
<body> 

<div id="navigation"> ... </div> 
<div id="contenu"> ... </div> 
<div id="pied"> ... </div> 
</body> 

Inavigation { font-si ze:lem} 
Icontenu {font-size: 1.2em} 
#pied {font-size:0.9em} 

Ici, la page type a une colonne de navigation contenant des liens d'une 
taille de 10 pixels, une colonne principale avec des caracteres de 12 pixels 
et un pied de page avec une police de 9 pixels. 

Les paragraphes 

Le paragraphs est une vraie unite de texte, avec des proprietes d'aligne- 
ment, d'alinea, d'interlignage, etc. 
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L'alinea 

L'alinea permet le retrait de la premiere ligne d'un paragraphe. Cette 
caracteristique a pour but de rendre visible le changement de paragraphe. 
II faut utiliser un espace special ou un alinea pour marquer les differents 
paragraphes, sinon, dans le cas d'une derniere ligne remplie, le passage 
n'est pas visible. 

.paragraphe{ 
text-indent:5px; 

} 

La propriete text-i ndent peut prendre comme valeur un nombre positif 
ou negatif : 

■ pixel ; 

■ pourcentage ; 

■ em ; 

■ point. 

Par defaut, la valeur est 0. 

L'alignement 

L'alignement d'un texte dans un paragraphe peut etre vertical ou 
horizontal. Le paragraphe a un fer a gauche ou a droite, ou il peut etre 
justifie, c'est-a-dire aligne des deux cotes. Dans ce dernier cas, la 
justification joue sur les espacements pour etirer la ligne jusqu'au bord. 
L'exemple suivant est tire du site Biblioscript (www. bi bl i oscri pt . com/ 
css/txt_vertical .shtml) (voir Figure 3.7). 



La propriete verti cal-al ign concerne les elements en ligne et la 
position du contenu a l'interieur des cellules de tableau. Les elements en 
ligne peuvent etre des images, le contenu d'une balise span, etc. 



Tab. 3.6: L'alignement vertical 


Valeur 


Effet 


basel i ne 


Alignement sur la base de la ligne 


middle 


Alignement au milieu de la base de la ligne 


sub 


Alignement en bas de la ligne de base, en indice 
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Tab. 3.6: L'alignement vertical 


Valeur 


Effet 


super 


Alinnpmpnt ziii-Hpcciic Hp \a linnp Hp hacp on ovnncp 
hi iy i ici iici i l du uebbub uc id nyiic uc udbc, cii ga|juog 


text-top 


Alignement en haut de la boite de I'element 


text-bottom 


Alignement en bas de la boTte de I'element 


top 


Alignement en haut de la boTte de I'element avec le haut de la boTte 
de la ligne 


bottom 


Alignement en bas de la boTte de I'element avec le bas de la boTte 
de la ligne 


La longueur 


Alignement au-dessus (valeur positive) ou en dessous (valeur 
negative) de la ligne de base 


Le pourcentage 


Alignement au-dessus (valeur positive) ou en dessous (valeur 
negative) de la ligne de base 



Flchler Edition Affichage Alter a Marque-pages 


Ouflls ? 


Ceci est un texte normal... : 


: (top) 


C^^Cl est un texte normal... 


: (top) 


Ceci est un texte normal... : 


: (super) 


Ceci est un texte normal... : 


: (baseline) 


Ceci est un texte normal... : 


: (middle) 


Ceci est un texte normal... : 


: (sub) 


Ceci est un texte normal... : 


: (bottom) 




Termine 



▲ Figure 3.7 : Vertical-align 
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La hauteur de ligne 

L'interlignage est la distance entre deux lignes. Pour une bonne clarte, il 
est conseille de la porter a 10 % ou 20 % de plus que le corps du caractere. 
Les unites de base sont les meme que celles du caractere. 

■ pixel ; 

■ pourcentage ; 

■ em ; 

■ point. 



P { 

font-size: lem; 
line-height: 120%; 
} 



■ . . , . . . J A •* Figure 3.8 : 

ISitues dans le perirnetre dujnassill 

l^n^m^TtfpfeV.^^^fe'Jul Hauteur de ligne de 0. 75 em 



3.2 Les illustrations 

Les illustrations accompagnent le texte. En d'autres termes, l'utilisateur 
voit en premier le texte, puis ensuite les images. Les illustrations sont un 
complement du contenu du texte pour appuyer ou aider a la comprehen- 
sion ou encore creer un decalage ironique de sens. 

Une bonne illustration doit repondre a certains criteres. Elle est au format 
portrait a la franchise ou paysage a l'italienne. Pour faire ressortir les 
illustrations, il est preferable d' avoir des formats varies, qui arreteront le 
regard. Pour retenir Pceil, il faut que les personnages et les objets soient 
bien organises dans le cadre. II ne suffit pas de savoir appuyer sur le declic 
d'un appareil photo numerique pour s'improviser photographe. II existe la 
regie des tiers dans une image. Ainsi, les personnages ou les objets 
importants doivent se situer a Fintersection des tiers dans l'image. II s'agit 
de diviser une photo en trois pour obtenir neuf rectangles. L'oeil est 
conduit vers leur intersection naturellement. La photo utilisee doit etre 
bien contrastee pour etre lisible, accrocher le visiteur et avoir un impact. 
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Voici quelques questions a se poser sur une illustration : 

■ Quelle information apporte-t-elle ? 

■ Decrit-elle une situation ? Est-elle symbolique ? 

■ Cree-t-elle de 1' emotion ? 

■ Vient-elle en complement du texte ? 

■ Est-elle un decor dans la page, qui casse la monotonie des blocs de 
texte ? 




Une image se lit comme un texte. Si elle horizontale, elle se lit de gauche 
a droite. Les bandes dessinees constituent un excellent objet d'etude. Un 
personnage, par exemple, qui court de gauche a droite, a l'air d'aller plus 
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vite que s'il courait de droite a gauche, dans un univers occidental, du fait 
qu'en Occident, on a l'habitude de lire de gauche a droite. 



pk£ W-*J' sets hC'^b!*'. p •Awn Hnilopou GadAfwv ... Q 



Hexaltox* 




vous etes Expert ou Cadre Superieur 




▲ Figure 3.11 : Illustrations 



Une illustration se place en position flottante avec la propriete HTML 
al ign. L'equivalent est la position flottante des boites di v, mais l'image 
est un element en ligne, c'est-a-dire qu'elle s'insere dans le flux des 
balises. En revanche, un selecteur avec display: block est retire du 
flux general pour s'inserer dans le flux des blocs et se place done la ou le 
developpeur le decide. 

img { 
display: block; 
margin: lOpx; 
float: left; 

} 



3.3 La disposition 

Les CSS permettent de bien maitriser la position des blocs. Un encadre 
peut etre facilement insere dans un bloc flottant. 
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div .cadre { 

padding: lOpx; 

margin: 10 px; 

background-color: #233A00; 

font-size: smaller; 

} 

La strategic de l'emplacement des blocs vise plusieurs objectifs : 

■ hierarchiser V information ; 

■ attirer l'attention du lecteur en cassant un agencement trop symetrique 
et ordonne ; 

■ casser les gros paves illisibles en petites unites pour donner plusieurs 
perspectives sur le meme contenu ; 

■ entrainer le lecteur, par des accroches soigneusement disposees, a lire 
1' article entier. 



Fyrwr Ejdoon Mlcfwje ami 0*9j*<»qs OuMi I 
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A Figure 3.12: Disposition des informations 



Un coup d'oeil sur certaines pages peut causer une indigestion. La subtilite 
consiste a donner plusieurs entrees a F article. Avant la lecture etait 
litterale. Maintenant elle est de plus en plus spatiale. Les telespectateurs 
voient chaque chame de television comme une facette d'un reel morcele. 
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Avec la mode des mangas par exemple, les jeunes prennent 1' habitude de 
lire un livre en commencant par la fin, a la facon japonaise. Sur le Web, 
il en est de meme : le visiteur s'introduit dans le site par n'importe quelle 
page, parcourt, clique, revient, lit encore, comme quand il cherche sur sa 
television le morceau de reel qui va l'interesser 5 minutes. 

3.4 La couleur 



La couleur s'exprime de plusieurs facons, via les images, la police de 
caracteres et le fond, qu'il s'agisse de blocs ou de menus, et enfin les filets. 




▲ Figure 3.13 : Le chromographe 



Les couleurs sont restituees a partir des trois couleurs primaires : le rouge, 
le vert et le bleu (RVB ou RGB). Le melange des trois donne le blanc en 
couleurs additives et le noir avec des couleurs soustractives. Les differen- 
ces de proportion reconstituent les couleurs du spectre. Les couleurs 
additives sont obtenues avec une source lumineuse comme un spot, un 
projecteur video ou un ecran d'ordinateur (CFT ou LCD). Les couleurs 
soustractives sont obtenues par le melange des colorants (procede utilise 
dans Fimprimerie). Comme la somme de tous les pigments ne donne pas 
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exactement le noir, mais un marron fonce, on a ajoute le noir. Ainsi ce 
procede se nomme CMJN (cyan, magenta, jaune et noir). C'est la 
quadrichromie. 

Le contexte colore de l'ensemble joue aussi un role essentiel sur la 
perception de la couleur d'un objet. Ainsi, une police de caracteres rouge 
ou bleue sur un fond noir parait plus claire, et plus foncee sur un fond 
blanc. Ces effets de contraste ainsi que d'autres mecanismes visuels 
interviennent dans la perception de la couleur. 



fit 



. ■■■■ - 




▲ Figure 3.14 : http://provisoire.com 

L'ceil est influence par la perception du cerveau. Dans les langues 
celtiques, la couleur glas (en breton) represente le vert, le bleu et le gris 
avec, pour reference, l'ardoise. En breton moderne, le mot "gwer" a ete 
ajoute pour caracteriser les etoffes vertes (le vert synthetique). Les anciens 
Bretons distinguaient-ils ce vert ? Cette etude a aussi ete faite sur les 
anciens Grecs. Ainsi le cerveau distingue differemment les couleurs, selon 
leur contexte et selon la culture du spectateur. 
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I FicMter Edoon Affchage *Ier a Marque-pag« Outts 



BLEU ARDOISE 



Quitter ItilltH 



\Z COl 



□ 



Chaque colons existe en finition 
adoucie et vieillie 
(sauf I'ardoise oxydee) 



▲ Figure 3.15: Couleurardoisebleu-ardoise.fr 



La balance des blancs depend de la temperature de couleur. Elles ne sont 
pas les memes selon le moment du jour : elles passent du rouge au jaune, 
puis au bleu. Ces variations sont mesurees en kelvins. Les ecrans 
d'ordinateurs sont calibres differemment selon leur type (autour de 
9 300° K pour un CFT, et de 6 500° K pour un TFT) et leur marque. Le 
calibrage se fait sur un blanc "neutre". C'est l'etalon sur lequel se base 
tout le spectre affiche a Fecran. 

■ 9 300° K (blanc bleute lumineux) ; 

■ 7 500° K (blanc bleute) ; 

■ 6 500° K (blanc legerement bleute) ; 

■ 5 000° K (blanc legerement jaune) (voir Figure 3.16). 

Ainsi le spectre de couleurs que le developpeur voudra rendre sur son site 
variera d'un moniteur a l'autre. II est done inutile d'etre trop perfection- 
niste dans ce domaine. 

On distingue les couleurs froides, chaudes ou neutres, relaxantes ou 
toniques, complementaires ou opposees, etc. 



504 • Double Poche CSS 



La couleur 



rvrwr iter 

♦ ■♦■0O 



PHOTOGRAPHIZ 




A Figure 3.16: Balance des blancs 



Le logiciel Color Schemer permet de degager quelques couleurs dominan- 
tes. A celles-ci peut s'ajouter une couleur tonique qui "reveillera" le visiteur. 

II existe deux principales proprietes de couleur : 

■ color concerne la couleur de surface, c'est-a-dire le plus souvent la 
couleur du texte. 

■ background-col or designe la couleur de fond. 

Notation hexadecimale 

Les couleurs sont designees par un code hexadecimal complet (ou 
abrege), de 6 caracteres precedes par un diese (#), ce qui permet d'eco- 
nomiser de la place. 16 777 216 couleurs sont ainsi repertoriees. 

< Figure 3.17 : 

Hexa 
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Le code hexadecimal des couleurs 

'em/ 

Les nombres en Occident sont en base 10 (de 0 a 9). C'est le 
code decimal. Le code hexadecimal est en base 16. Apres 9, il 
utilise les lettres A pour 1 0, B pour 11... jusqu'a F pour 1 5. La couleur 
est codee sur 8 bits. Chaque couleur de base (rouge, vert, bleu) est 
codee sur deux caracteres (de 16 possibilites chacun), ce qui donne 
256 possibilites, done 21 6 3 , soit 16 777 216 possibilites. Le code cou- 
leur de ce qu'on appelle les couleurs securisees, reference 
216 couleurs. 



Les codes formes de paires de caracteres identiques peuvent etre abreges. 
Ainsi #1 1BBDD correspond a #1BD. 



Notation par mot-cle 

Les couleurs peuvent etre nominees par leur nom en anglais 



Tab. 3.7 : Les mots-cles representant les couleurs 


Mot-cle Correspondance 


aqua 


Cyan 


bl ack 


Noir 


bl ue 


Bleu moyen 


f uchsi a 


Rose fuchsia 


gray 


Gris fonce 


green 


Vert moyen 


1 ime 


Vert printemps 


maroon 


Marron fonce 


navy 


Bleu marine 


ol i ve 


Vert olive 


purpl e 


Violet 


red 


Rouge 


silver 


Gris moyen 


teal 


Vert sapin 
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Tab. 3.7 : Les mots-cles representant les couleurs 


Mot-cle 


Correspondance 


white 


Blanc 



nom r«s«rvM da eoulaur «*>t dupomW*-. dam Is ipacihcaion CSS1. C*s eoulaun pi adafintat 
tont itwvs da Html 4.0 qui lat a lin-mam* fnr,*~. da la paUtta VGA pat dafaut da Window?, 



«W00FF H «f?WF ■ -WfTOO I 
■ MMM ■ 



H blart I ,.. 

<«DFFFF ^1 <ODDD00 H -«0MI0 ■ 

I °*" <* >w ** I 

I i*.o,tw H<i:i,i:i.o> n».\t«:,i«:>^B . 



M 

o.in.tt 



Quelques couleurs "light" 

ti|htblu« ti|M^*Uov. hihttrwn 



▲ Figure 3.18: Couleurs predefinies 
Attention aux erreurs d'orthographe en anglais ! 
col or: teal : 



Notation en pourcentage 

Cette notation consiste a calibrer de 0 % a 100 % la quantite de chaque 
composante (rouge, vert, bleu) d'une couleur, 0 % correspondant a 
l'absence de la composante. II est possible d'utiliser des decimales, ce qui 
accroit le nombre de nuances possibles. 

color: rgb(42%, 70.25%, 0%); 
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Notation decimate 

Cette notation utilise les nombres de 0 a 255 pour caracteriser la propor- 
tion des composantes (rouge, vert et bleu) de la couleur. 

color: rgb(25, 0, 255); 

0 denote l'absence de la composante et 255 la presence a 100 % de la 
composante. 

Notation en reference a I'interface de I'utilisateur 

Cette notation donne au developpeur les outils pour imiter les fonction- 
nalites auxquelles I'utilisateur est habitue. Ces couleurs integrent I'inter- 
face du navigateur avec les couleurs du site comme sur le site Gaesys 
(www.gaesys.com). 



HTm (Own Ufcrug* tm i Ma^jrfaon Oupt 



A Gaesys 



1 



Des services orientes qualite 



Gaaayt laaftia voir* |M* Martial. In ti anal ti *xtran*t qui continuant la CMur Of voir* 
communication tfantiapm* S*i i*rvKai fapondant a voa batc-ln* actual* at *• p*apai*nt 
a votia avoltrtlon an atploiant la* fort** poiantlailtai du w*c ilandatd 

Gaaiy* t* vaul partanalr* da I'avohrtlon »ni( jc* d* voir* ttratagia toiTotrnatlqu* an 
VDua «MM * tnt*gr*r la* standard* ouv»rts at la* logklati Hm*i dans votta piopta tyslarna 



Les $K*« aniMnrt Le* intranets cte Osiion 

■ l cHMrmBon a» mm tm/m 



© 



Opquast I 0 



XHTML 1 0 « CSS 3 WOC 



▲ Figure 3.19 : Gaesys 



Certaines possibilites, comme la coloration de la barre de defilement du 
navigateur, ne sont disponibles qu'avec Internet Explorer. Pour integrer 
cette glissiere verticale, il faut dans ce cas integrer la couleur de 
l'ascenseur dans la page. 
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Tab. 3.8 : Les couleurs se referant a I'interface de I'utilisateur 


Designation 


Signification 


ActiveBorder 


Couleur de la barre de titre active de la fenetre 


Acti veCaption 


Couleur du titre de la barre de titre active de la fenetre 


MppWUl KSpdLc 


Pniilpnr Hp I'sirriprp-nlsin Hp |3 fpnptrp Hp I'annlipa+inn 3ptiwp 
OUUICUI UC 1 d[ MCI c pidll Uc Id 1 trl It: LI c Uc 1 dppilcdllUII dull Vc 


DdL KU 1 UUIIU 


Pniilpnr Hp I'arriprp-nlan Hn Riirpaii 
L/UUICUI Uc 1 dlllCIC pidll UU DUICdU 


But ton Face 


Pniilpiir Hoc hmitnnc Hoc hrtTtpc Ho moccono 
UOUIcUl Ucb UUUIOIIS Ucb UUILcb Uc lllcbbdyc 


Bu + frtnU-inhl inht 

DUtLonniynnynL 


PmilciiK Hoc (ifYihnnoc on Ql"! Hoc hmitnnc Hoc hni+QC Ho 
UOUIcUl Ucb UlllUldycb ell JU Ucb UUUlOMb Ucb UUIlcb Uc 

message 


ButtonText 


Couleur du texte des boutons dans les boites de message 


Capti onText 


Couleur des titres dans les boites de message 


GrayText 


Couleur du texte desactive dans les boites de message 


Highlight 


Couleur des elements selectionnes dans des listes de choix 


Highl ightText 


Couleur du texte selectionne 


InactiveBorder 


Couleur d'une ligne de titre d'une fenetre non active 


Inacti veCaption 


Couleur du titre dans la ligne de titre d'une fenetre non active 


InfoBackground 


Couleur de fond des info-bulles 


InfoText 


Couleur du texte des info-bulles 


Mmenu 


Couleur des barres de menus 


MenuText 


Couleur des elements de menus 


Scrol 1 bar 


Prill aiir Ho \o V\orm Ho Hpfiloinpn+ Hone loc fpnptrpo 
UUUIcUl Uc Id Udllc Uc UclllcMlcML Udllb leb icMcLlcb 


ThreeDDarkshadow 


rnii aiir cotnhrij Hoc nmhnnflc Hoc nloman+p Ql"! 
L/UUIcUl bUIIIUIc Ucb UMIUIdycb Ucb cIclllcMLb uU 


1 NiccUrdLc 


Pniilpur Hpc plpmpntc 

L/UUIcUl Ucb ClClllCllLb OU 


i nrccUni gn i l gnL 


Prtiilaiii* Hoc p|pmpn+c *Pn cur IpcdiipIc I'i itilicofpi ir wiant Hp 
uUUIcUl Ucb cIclllclELb uU bUI IcbLjUclb 1 UUMbdlcUl VIcllL Uc 

cliquer 


ThreeDLightShadow 


Couleur claire des ombrages des elements 3D 


ThreeDShadow 


Couleur sombre des ombrages des elements 3D 


Window 


Couleur d'arriere-plan des fenetres de document 


WindowFrame 


Couleur des bordures de fenetre 


WindowText 


Couleur de texte normal des fenetres de document 
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On peut imaginer une fausse fenetre de message, creee de toute piece a 
partir des attributs de couleur courants. 

.fenetre { 

color: buttonText; 

} 

Les couleurs et images d'arriere-plan 

La couleur de fond obeit a la propriete background-color, 
body { 

color: black; 
background-color: #FD9; 

background-image: url (images/image_de_fond.png) ; 
background-repeat: no-repeat; 
background-position: top left; 

} 

L'image designee par background-image peut etre repetee avec 
background-repeat et positionnee avec background-position. 
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▲ Figure 3.20 : Fond fixe 1 hersandesign.com 
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II est possible de faire en sorte que le decor suive l'ascenseur vertical, 
background -at tachment:fixed; 




nouvelles 



nouveaux templates 



^^^^^^^^^^^^^^^^^^^^ 




▲ Figure 3.21 : Fondfixe2hersandesign.com 

Les valeurs peuvent etre regroupees dans la propriete background de la 
facon suivante : 

background: background-color background-image background- 
repeat background-attachment background-position; 



body { 

background: navy url (image_de_fond.png) 
no-repeat fixed left bottom; 



Background-position 

La propriete background-position definit une position verticale et une 
position horizontale : top ou bottom, left ou right. Cette position peut 
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etre aussi un pourcentage de gauche a droite et de haut en bas (de 0 % a 
100 %). 

background-position: 0% 100%; 

L' equivalent est : 
background-position: top right; 

Pour placer un decor au milieu : 
background-position: top right; 

L' equivalent est : 
background-position: 50% 50%; 



Background-repeat 

La valeur par defaut de background-repeat est repeat. 



Tab. 3.9 : La repetition du decor 


Valeur 


Effet 


no-repeat 


L'image n'est affichee qu'une fois. 


repeat-x 


L'image est repetee horizo ntalement. 


repeat-y 


L'image est repetee verticalement. 


repeat 


L'image est repetee ad libitum. 



3.5 La pagination 

La pagination dans un livre est la distribution du texte en pages qui se 
suivent, tandis que sur le Web, la pagination ne comporte pas d'ordre : 
chaque page est plutot un chapitre avec un texte beaucoup plus court que 
celui d'un livre. Par ailleurs, le visiteur peut entrer dans le site par 
n'importe quelle page. De cela decoulent plusieurs obligations : 

■ faciliter 1' identification de la page ; 

■ reporter les elements de navigation sur chaque page ; 

■ garder une coherence tout au long des pages du site. 
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Faciliter ('identification de la page 

II s'agit de donner un titre explicite et de bien caracteriser le sujet de la 
page. Pour indiquer un titre, il existe plusieurs manieres de proceder. II est 
possible de l'integrer sur la page en haut au centre via la balise hi. La 
barre ou le menu de navigation peut designer la page courante par une 
couleur differente. Le lien peut prendre une autre couleur par le seul fait 
qu'il ne comporte que F intitule qui, alors, n'est pas encadre par la balise 
<a>.vers une page quelconque. 

Reporter les elements de navigation 

Le menu de navigation est une cle du site : il contient les liens vers chaque 
page, il hierarchise l'information et lui donne une coherence. La cohe- 
rence est donnee par l'ordre d'affichage des liens, ce qui constitue deja 
une hierarchie, mais aussi par des marqueurs comme des couleurs ou des 
puces differentes. II est aussi possible de suggerer quelle est la page 
suivante, via un lien au bas de la page courante qui conduit vers la page 
suivante avec un intitule explicite. Ce lien vers la page suivante est tres 
souvent utilise sur des sites lineaires, comme les tutoriaux. 




▲ Figure 3.22 : www.bleu-safran.com 
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Garder la coherence 

La coherence d'un site est surtout basee sur sa charte graphique, 
c'est-a-dire sur l'habillage des pages et la disposition des textes, des titres, 
des menus, qui font que le visiteur sait immediatement sur quel site il se 
trouve. C'est l'identite graphique du site. Une facon de l'identifier est 
aussi d'inserer une icone dans la barre d'adresse et dans Fonglet dans les 
navigateurs a onglets, ainsi que dans les favoris. Cette icone placee dans 
le repertoire principal est nommee favicon.ico. 

C'est ici qu'intervient la feuille de style a laquelle toutes les pages sont 
rattachees. La feuille de style donne un cachet au site et aide les 
internautes a l'identifier. 
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4.1 La page d'accueil 



La page d'accueil est essentielle. Elle donne une premiere impression, qui 
sera primordiale pour l'internaute dans sa decision de poursuivre sa visite. 




▲ Figure 4.1 : Une vraie page d 'entree 



La page d'accueil s'affiche quand l'internaute saisit le nom de domaine du 
site. Si elle est nommee index et qu'elle soit la seule a porter ce nom de 
fichier, elle s'affiche quand l'internaute saisit http://ardaee.com dans 
cet exemple. L'extension de fichier peut etre .htm ou .php. 

II est important que le visiteur soit directement dans le sujet, sans page 
intermediate sur laquelle cliquer, ou pire, sans avoir a attendre qu'une 
animation se termine ou a chercher un lien trop discret sur lequel cliquer. 

La page d'accueil garde la meme configuration, ou au moins un meme 
aspect graphique, que le reste du site. Le logo peut etre plus gros que sur 
le reste des pages, pour signifier l'importance de cette page. Si une 
banniere de publicite apparait en haut, il vaut mieux faire en sorte que 
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cette publicite ne puisse pas etre confondue avec le titre de la page ou 
prise a tort pour le theme du site. 

\ 

Lien vers la page d'accueil 

Si la barre des liens est identique sur chaque page, il est 
preferable de ne pas avoir un lien actif vers la page d'accueil sur 
ladite page d'accueil et de distinguer le lien inactif par une couleur qui 
le demarque des autres liens. 

v J 

La page d'accueil contient les liens de navigation vers tout le site, 
1'information essentielle qu'il propose et les dernieres nouvelles. En 
entrant dans la page d'accueil, le visiteur doit decouvrir le sujet du site et 
les themes qui seront abordes dans ses pages. Son regard ne doit pas avoir 
a chercher oil aller. Soit le site est un site d'information et il affiche les 
nouvelles dans sa page d'accueil, soit c'est un autre type de site et les liens 
de navigation doivent etre mis en evidence. En effet, si le nouveau venu 
s'attarde un peu sur la page d'accueil, l'internaute fidele, lui, prend la page 
d'accueil comme un carrefour, un acces central aux autres pages et aux 
annonces de mise a jour. 

"Que vient chercher l'internaute sur le site ?" est la bonne question a se 
poser. II doit trouver aisement ce qu'il vient chercher en cliquant le moins 
de fois possible sur des liens. 
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▲ Figure 4.2: Lemoteurderecherchecomeverbena.com 
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Certains visiteurs preferent utiliser un moteur de recherche pour naviguer 
sur un site. II est done indispensable d'en installer un en premiere page. 
Le moteur de recherche Atomz est gratuit dans sa version basique 
(www.osinet.fr/code/prix.asp?CodeMarque=ATOMZ) et s'insere par- 
faitement dans un site, en en prenant les couleurs. 
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▲ Figure 4.3 : Atomz 



Le titre de cette page donne un premier indice du contenu du site. Entre 
les balises title, il vaut mieux eviter d'inscrire "Page d'accueil 
d'EcouteS'il PI eut" et preferer "Ecoute S ' i 1 Pleut, Invitez-vous 
au jardin extraordinaire !" par exemple, plutot que "Bienvenue 
sur notre page d'accueil". 

Sur la page d'accueil, le visiteur est a la croisee des chemins. Plusieurs 
options peuvent etre choisies : 

■ soit afficher les liens avec chaque theme resume par un petit 
paragraphe ; 

■ soit afficher simplement les liens comme sur n'importe quelle page ; 
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soit faire un texte unique qui introduit certaines rubriques plus 
import antes. 




▲ Figure 4.4 : www.clic-iniages.com 



Le texte de la page d'accueil doit seduire pour donner envie d'aller plus 
loin. Meme si le visiteur a envie de connaitre le theme traite par le site, son 
desir a besoin d'etre attise. II faut instaurer ici la confiance, voire la 
connivence. Le visiteur vient sur la page d'accueil, attire par un intitule 
dans le moteur de recherche ou un lien sur un autre site. Souvent, il ouvre 
le lien en affichant une nouvelle fenetre ou en se disant qu'il pourra 
toujours revenir en arriere avec le bouton adequat sur son navigateur. 
Ainsi il parcourt rapidement la page d'accueil pour verifier si le site 
satisfait sa curiosite. II est done necessaire de l'accrocher par ce qui fait 
Foriginalite du site. Cette information originale doit etre mise en avant, a 
un endroit strategique de la page. 



4.2 Le site 

La creation du site a commence par la creation du logo, compose d'un 
fond jaune clair (#FFFFE1) sur lequel figure la phrase "Les jardins 
d ' Ecoute S ' i 1 PI eut", dont la premiere partie est coloree en vert clair 
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(#8CBD23) et la deuxieme en bleu fonce (#1D1779) avec une ombre portee. 
La carte du site a ete dressee, ce qui permet de monter les liens de 
navigation. Deux types de liens de navigation se sont degages : ceux 
concernant le gite et le tourisme et ceux tournes vers le commerce et le 
service. II est indispensable de materialiser leur difference. Le choix des 
couleurs se porte vers un degrade de verts : d'un cote des verts a 
dominante jaune, de l'autre des verts a dominante bleue. 

j ecoute s'il pleut j 

▲ Figure 4.5 : La banniere ardaee.com 

La construction d'un site commence par la redaction d'un cahier des 
charges qui repertorie les desiderata du client et l'aide a preciser sa 
demande. Ensuite le graphiste cree une page type sur un logiciel 
graphique. La creation des feuilles de style vient ensuite. 

Dans notre cas, il est decide de mettre la totalite des liens de navigation 
sur chaque page de fa£on a ce qu'un visiteur atterrissant sur une page 
quelconque du site ait les outils pour remonter a la page d'accueil ou 
evoluer directement dans le site. 

4.3 Le XHTML 

Le XHTML est un HTML plus strict au niveau de ses regies. Les regies 
sont assez simples a enumerer et des programmes de validation permettent 
de detecter les erreurs de syntaxe (voir Figure 4.6). 

■ Toute balise ouvrante doit comporter une balise fermante ou un trait 
oblique signalant que cette balise est ouvrante et fermante. 

■ Les containeurs peuvent s'imbriquer, mais pas s'entrelacer. 

■ Les noms des balises et des proprietes doivent etre en minuscules. 

■ Les proprietes ou attributs doivent avoir une valeur. 

■ Les valeurs des proprietes sont encadrees par des guillemets. 

■ Le standard utilise pour le code de la page doit etre precise. 
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XHTML 

E tensible 

Kyper ext 
arkup 
anguage 



▲ Figure 4.6 : XHTML 



La balise fermante 

Tout balise ouvrante doit s'accompagner d'une balise fermante. 



#contenu 



A. Figure 4.7 : Balise afermer 
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Ainsi le code suivant est correct en HTML, mais errone en XHTML : 

<p>Ceci est une ligne 

<p>Ceci est une deuxieme ligne 

Le paragraphe commencant avec la balise <p> doit se clore par </p> pour 
etre correct sous XHTML : 

<p>Ceci est une ligne</p> 

<p>Ceci est une deuxieme ligne</p> 

De la meme facon, le code suivant ne sera pas accepte : 

Ceci est une ligne<br> 
Ceci est une deuxieme ligne 

Le code qui suit sera valide : 

Ceci est une ligne<br /> 
Ceci est une deuxieme ligne 

Le trait oblique de fin indique a l'analyseur du navigateur de ne pas 
chercher une balise fermante. L'espace present avant la barre oblique 
assure la compatibilite avec les anciennes versions des navigateurs. 



Tab. 4.1 : Les balises solitaires du HTML en XHTML 


Balise 


Code 


IMG 


<img ... alt="..." /> 


OPTION 


<option ...> ... </option> 


HR 


<hr... /> 


BR 


<br /> 


LI 


<1 i ... > ... </l i> 


INPUT 


<input ... /> 


DT 


<dt ... > ... </dt> 


DD 


<dd ... > ... </dd> 



522 • Double Poche CSS 



Le XHTML 



L'imbrication des balises 

Les conteneurs s'imbriquent comme des poupees russes. 



#contenu 








#corps 





•* Figure 4.8 : 

Conteneurs qui 
se chevauchent 



Le chevauchement, par contre, n'est pas permis alors que les navigateurs 
HTML s'en accommodent et le corrigent : 

<bxu>mauvai se ecriture des bal i ses</bx/u> 
<uxb>ecri ture correcte des bal i ses</bx/u> 
<bxu>ecri ture correcte des bal i ses</ux/b> 

Un conteneur peut contenir un autre conteneur ou etre enferme dans un 
autre conteneur. 



#contenu 



< Figure 4.9 : 

Conteneur et 
contenant 



#corps 
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Les denominations en minuscules 

Les noms des balises ou des proprietes doivent etre en minuscules. 
Invalide : 

<IMG src="http://monsi te.com/image.gif " /> 
Invalide : 

<img SRC="http://monsi te.com/image.gi f" /> 
Valide : 

<img src="http://monsi te.com/image.gi f" /> 



Les proprietes definies 



En XHTML, il n'est pas possible de laisser une propriete vide. Ainsi le 
code suivant est invalide : 

<img src="http://monsi te.com/image.gi f" alt=""/> 

Par ailleurs, il est impossible de mettre une valeur tenant sur deux lignes. 

<ittig src="http://monsi te.com/image.gi f" alt="Mon 
portrait"/> 



Hotre selection 

I EVALOE BIO Nettoyant 

I Pour un nettoyage plaisir 

|eval 



douK visage tube de 

Prix : 9.90 € 
Quantite : 1 

I EVALOE BIO Nettoyant doux visage tube de 200ml I 



a Figure 4.10 : Alt 

Le code suivant est valide : 
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<img src="http://monsi te.com/image.gi f" alt="Mon portrait" /> 

Certaines proprietes en HTML sont glissees dans les balises sans valeur ni 
guillemet et en capitales. Le XHTML exige une valeur. Meme si cela peut 
paraitre une repetition, ces proprietes prendront comme valeur leur propre 
nom : 



Tab. 4.2 : Les proprietes sans valeur en HTML 


Propriete 


Valeur 


compact 


compact=" compact" 


checked 


checked="checked" 


decl are 


decl are="decl are" 


readonly 


readonly=" readonly" 


disabled 


di sabl ed="di sabl ed" 


selected 


selected="selected" 


defer 


defer="defer" 


i smap 


i smap="i smap" 


nohref 


nohref="nohref " 


noshade 


noshade="noshade" 


nowrap 


nowrap="nowrap" 


mul ti pi e 


multiple= "multiple" 


noresize 


noresize=" noresize" 



Le standard 

La balise DOCT YPE qui se refere a une DTD qui est un document qui decrit 
les directives de syntaxe pour le code qui sera contenu dans la page. Si la 
page obeit a la norme XHTML 1 .0, elle peut avoir une DTD Transitional, 
Frameset ou Strict. La DTD Frameset intervient quand la page contient 
des trames, c'est-a-dire quand la page est divise en fenetres. La DTD 
Transitional permet de mettre a jour plus facilement un site en HTML 4. 
Elle est moins exigeante que la Strict et permet l'utilisation de balises qui 
ne sont pas dans la DTD, comme la balise center. 
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<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//FR" 
"http://www.w3.org/TR/xhtml 1/DTD/xhtml l-strict.dtd"> 

<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //FR" 
"http://www.w3.org/TR/xhtml 1/DTD/xhtml 1-transitional .dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//FR" 
"http:/ /www. w3.org/TR/xhtml 1/DTD/xhtml 1-f rameset .dtd"> 

La regie stricte ne permet pas l'usage de certaines balises, comme dir, 
menu, center, isindex, applet, font, basefont, s, strike, u, i frame 
et noframes. Certaines proprietes sont aussi refusees. La norme 
XHTML 1.1 est uniquement stricte et ne comporte pas d'autres DTD. 

<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
s< "http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> 

4.4 Les CSS 

Les feuilles de style CSS sont formees de code separe du code HTML et 
qui en precise le format. Pour pointer vers des parties de code HTML, les 
feuilles de style se servent de selecteurs, de classes, d'identificateurs et de 
pseudo-classes. 

Les selecteurs 

Les selecteurs designent les elements sur lesquels sont appliquees les 
regies. 

Un selecteur comprend l'entite designee suivie d'un espace et d'une 
accolade ouvrante accompagnee d'une accolade fermante, qui delimitent 
une ou plusieurs instructions (voir Figure 4.11). 

Les instructions sont composees du nom de la propriete suivie de deux 
points, d'un espace puis de la valeur donnee a cette propriete. Auparavant, 
il etait d'usage de mettre ces indications dans les balises sous forme de 
proprietes, mais le code etait ainsi dissemine. 
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div { 



^ <div> 



code 



} 



</div> 



A Figure 4.11 : Selecteurs 



Les selecteurs de type 



Les selecteurs de type pointent vers des conteneurs delimites par des 
balises simples. lis contiennent les instructions qui indiquent au contenu 
d'une balise comment il doit se comporter. 

hi { 

font-size: 2em; 

} 

Dans la page concernee, tout le texte inclus dans les balises hi sera d'une 
taille de 2 em. 



Le selecteur universel est peu employe. II permet de donner des 
instructions a toutes les balises de la page. On lui prefere souvent le 
selecteur body, qui remplit le meme office (voir Figure 4.12). 



Le selecteur universel 



color: #FF0; 



Double Poche CSS • 527 




La realisation du site 





<body> 


{ 


m m m 

</aiv> 


code > 


& m & 


} 


<div> 




m m m 

</body> 


▲ Figure 4.12 : Selecteur universe! 



Abreger le code couleur 

#FF0 correspond a la couleur rouge. C'est la forme abregee de 
#FF0000. II est courant de voir le code couleur comme trois paires 
de codes et d'identifier chaque paire par son code. Cela n'est possible 
que pour les couleurs principales. Ainsi #9A9 correspond a un gris vert 
et a #99AA99. En revanche, une couleur saumon comme #FF8A4D ne 
peut etre abregee. 



Les selecteurs descendants 

Quand le code designe les descendants d'une balise donnee, le selecteur 
ascendant est suivi d'un espace et du selecteur descendant. Prenons 
comme exemple le code HTML suivant : 

<body> 

<p>Voici des exempt es <ul> 

<li>le chat est <strong>bl anc</strongx/l i> 
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<li>le ci el est <strong>bl eu</strongx/l i> 
<li>l'arbre est <strong>vert</strongx/l i> 
</ul> 

<p>Ce sont de <strong>bons</strong> exempl es</p> 
</body> 

Ce code HTML est enrichi par le code CSS qui suit : 



p ul li strong { 
font-size: 1.5em; 

} 



Le resultat sera que les caracteres seront plus grands uniquement dans la 
liste non ordonnee qui renferme les descendants de la balise 1 i , 
elle-meme descendante de la balise u 1 , elle-meme descendante de la 
balise p. 




les nceuds textes 

Le contenu texte d'une balise est son descendant. Voir le DOM 
au chapitre 9. 



pulli strong { 



<//> 

<strong> 
blablabla 
</strong> 
</li> 

</p> 



•* Figure 4.13 

Selecteur 
descendant 



Les classes 

La classe est une autre maniere de pointer vers une partie d'un document. 
Elle permet aussi de donner une signification a un contenu, en le 
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denommant a travers la propriete class, a la maniere du XML. Cette 
notion de classe permet au code d'etre plus specifique et d'appliquer du 
code a des objets apparentes. 

<body> 

<p>Voici des exemples <ul> 

<li>le chat est <strong cl ass="bl anc">bl anc</strongx/l i> 
<li>le ci el est <strong cl ass="bl eu">bl eu</strongx/l i> 
<li>l'arbre est <strong cl ass="vert">vert</strongx/l i> 
</ul> 

<p>Ce sont de <strong>bons</strong> exempl es</p> 
</body> 

La feuille de style est codee ainsi : 

li strong. blanc { 
color: #000; 

} 

li strong. bleu { 
color: #27F; 

} 

li strong. vert { 
color: #291; 

} 

Dans chaque balise dont l'attribut cl ass a comme valeur vert, le texte est 
colore en vert, a condition que cl ass soit place dans une balise strong et 
li. 

II est aussi possible d'etre generique en ecrivant ceci : 

.vert { 
color: #291; 

} 

Cette notation marque en vert tous les textes dont la balise contient la 
classe vert. 

Les identifiants 

Les identifiants ont le meme fonctionnement que les classes, a ce ceci pres 
qu'ils sont uniques. Un identifiant ne peut etre utilise qu'une seule fois 
dans un document, mais plusieurs fois sur le meme site. II designe le 
contenu d'une balise precise. 
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<p id="presentation">Le code presente ici est dote 
d'un identifiant unique</p> 

Le code CSS : 

Ipresentation { 
font-face: sans-serif; 
font-weight: bold; 
color: #291; 



Le texte de cette presentation sera en police sans empattements, en gras et 
de couleur verte. 



(capsule) 
(capsule) 
(capsule) 
(capsule) 
(capsule) 
(capsule ) 
(capsule ) 
(capsule) 
(capsule) 
(capsule) 
(capsule) 
(capsule) 



ttcontenu 



ttcorps 



ttcapsule 



< Figure 4.14 : 

Difference entre 
classe et 
identifiant 



L'heritage 

Quand les proprietes d'une balise sont specifiees dans une feuille de style, 
toutes les balises contenues dans le conteneur en heritent, a moins que Ton 
ne donne une autre valeur a cette propriete pour V enfant. Cette derniere 
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fonctionnalite est parente de la surcharge de propriete dans les classes en 
programmation objet. 

L'heritage permet d'eviter de repeter chaque propriete pour chaque 
selecteur. Ainsi si Ton caracterise le selecteur body, toute la page est dotee 
de la meme propriete. 



DOM 



L'arbre du DOM figure une sorte d'arbre genealogique ou une 
balise contient d'autres balises qui sont ses enfants, ce qui cree 
des freres, des descendants, etc. . Voir le DOM au chapitre 9. 



Les selecteurs d'enfant 

L'heritage fonctionne sur le meme mode pour les selecteurs et les 
conteneurs. Si un conteneur limite par une balise ouvrante et une balise 
fermante contient un autre conteneur, ce conteneur prend naturellement 
les proprietes de son conteneur parent. 

<bxi>C'est de l'i tali que qui est gras</i> 
et ici c'est juste du gras</b> 

Si, par exemple le selecteur p recoit des proprietes, il peut etre ecrit de 
deux facons dans la feuille de style. Ici les contenus texte de <p>...</p> 
seront en bleu : 



p { 




color: blue; 

} 




ou encore : 


body p { 




color: blue; 




} 





II est aussi possible de designer seulement certains descendants d'un 
selecteur, comme dans ce code HTML : 
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<body> 

<div> <p>Achetez-l e immedi atement pour beneficier 
du rabais !</px/div> 

<p> Ce logiciel est un couteau Suisse pour le son</p> 
<p>Avec ce logiciel vous enregistrez tout son qui est emis 
par votre carte son !</p> 
</body> 

Le code precedent est accompagne par le code CSS qui suit : 

body>p { 
color: blue; 
} 

Le signe "plus grand que" (>) indique que seules les p, enfants directs de 
body, seront concernes par cette instruction. Ainsi le conteneur p dans le 
conteneur div sera epargne. Par contre, les conteneurs p qui n'ont pas 
d' autre parent que body auront leur texte en bleu. 




t 

a Figure 4.15 : Selecteur enfant 
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Les selecteurs d'enfant adjacents 

Les selecteurs d'enfant adjacents sont signifies par le signe + entre deux 
selecteurs a condition que le premier precede le deuxieme et qu'ils soient 
enfants du meme parent. Cette fonctionnalite est particulierement interes- 
sante pour des proprietes qui sont gerees par defaut par le navigateur 
comme un titre 1 suivi d'un titre 2 qui genere un grand espacement. 



hi + h2 { margin-top: -5mm; } 



II est possible aussi de modifier l'espace vertical entre une balise p et une 
balise ul quand le formatage par defaut ne convient pas. 




▲ Figure 4.16 : Enfants adjacents 

Les selecteurs d'attribut 

Les selecteurs d'attribut permettent de designer des conteneurs specifiques 
en fonction de leurs proprietes ou attributs. Cette fonctionnalite ouvre des 
perspectives. Par exemple, il est possible de modifier la couleur des liens 
qui vont vers l'exterieur du site : 

<pxa href="http://www.photo-de-cl asse.com">Si te gratuit de 

retrouvai 1 1 es</axbr /> 
<pxa href =" 1 i ens. php">Tous les liens</a> 

Un des liens va vers une page exterieure du site, 1' autre conduit a un 
annuaire de liens dans le site. 
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a { 

color:#029; 
} 

a[href |="http"] { 

color:#261; 

} 

La couleur des liens par defaut sera bleue, et verte pour les liens a 
l'exterieur. 

Une autre possibilite est de marquer les liens qui ouvrent une nouvelle 
fenetre dans le navigateur : 

a { 

color:#029; 
} 

a[target="_blank"] { 
color:#261; 

} 

Pour cela, la feuille de style pointe vers les balises des liens qui 
contiennent la propriete target = "_bl ank". Un autre trait interessant est 
d'accoler un drapeau sur les liens qui pointent vers un site en langue 
etrangere. 



Cuisine 

• le site du - i -' iimoji : techniques culinaires et recettes en photo, gastronomie moleculaire (explications 
physique et chimiques de phenomenes culinaires, experimentations en tout genre). Site gratuit, complet et 
foisonnant, anime par un professionnel passionne et drole. Indispensable pourtous, debutants ou cordons 
bleus. 

• recherche Google : le? archive-- de , groupe de Usenet-fr consacre... a la cuisine. Plein de recettes 

testees, de trues et de discussions autour de la cuisine. 

• la FAQ de fr.rec.cuisine : compilations de FRC, equivalences de mesures, etc. 

• les recettes du Cafe gourmand un restau geneuois dont le patron, Sergio, poste souvent sur FRC. 

• Bon aopetit bien sur , remission quotidienne de Joel Robuchon sur France 3 

• Fruits de la mer, le site d'Alain Diverres, pecheur breton, attache a la cuisine simple de ce qui vient de la mer 

• Fine Maree, le site de Dimitri, pecheur normand, specialise dans la coquille Saint-Jacques. Vous y trouvere; les 
videos ebourrifantes du vol majestueux de la flere et rude coquille parcourant les etendues de la pampa 
sous-marine normande. 

• Des recettes vietnamiennes 

• Savours du Monde , un site pratique pour avoir des recettes de tous les pays 

f i n 

• The All.,: an : I recettes africairiei -~ *J 



▲ Figure 4.17 : Des liens avec drapeau 
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Tab. 4.3 : Exemples de granulation des selecteurs d'attribut 



Selecteur Portee Selection Non selection 



p[lang] 


Tous les 

paragraphes avec 
une propriete lang 


<p lang="es"> 


<P 

cl ass="l ang"> 


p[l ang="fr"] 


Tous les 

paragraphes dont 
la propriete lang a 
fr comme valeur 
exacte 


<p lang="fr"> 


<P 

lang="fr-BE"> 


p[l ang~="fr"] 


Tous les 

paragraphes dont 
la propriete lang 
est soit le mot f r 
ou qui contient le 
mot f r dans une 
suite de valeurs 


<p lang="fr br 
cy"> 


<P 

lang="fr-BE"> 


p[l ang^= "fr"] 


Tous les 

paragraphes dont 
la propriete lang 
commence par le 
mot fr 


<P 

1 ang="f r-BE"> 


<p lang="cy br 
fr"> 


p[l ang$="fr"] 


Tous les 

paragraphes dont 
la propriete lang 
finit par le mot f r 


<p lang="cy br 
fr"> 


<P 

1 ang="f r-BE"> 


p[l ang*="fr"] 


Tous les 

paragraphes dont 
la propriete lang 
contient le mot f r 


<P 

1 ang="f r-BE"> 


<p lang="cy 
br"> 


p[lang| = "fr"] 


Tous les 

paragraphes dont 
la propriete lang 
est exactement f r 
ou commence par 
fr- 


<P 

1 ang="f r-BE"> 


<p lang="en 
fr"> 
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attribut 1 ang 

L'attribut langue donne comme code le code de la langue en 
deux lettres parfois suivi d'un tiret et du code d'un pays, ainsi 
fr-CA signifie le francais du Canada. Quand il y a plusieurs langues 
comme cy br fr, on peut en faire une enumeration separee par un 
espace - ici gallois, breton et frangais. 



Les declarations multiples 



Les declarations peuvent contenir plusieurs lignes. Ainsi une CSS comme 
celle-ci est correcte : 



p#surl ignement { color: blue; } 

p#surl ignement { font-size: lem; } 

p#surl ignement { background-color: yellow; } 

p#surl ignement { font-weight: bold; } 

p#surl ignement { letter-spacing: .3em; } 



II est cependant plus simple de regrouper les proprietes dans une seule 
paire d' accolades pour le meme selecteur : 



p#surl ignement { 
color: blue; 
font-size: lem; 
background-color: yellow; 
font-weight: bold; 
letter-spacing: .3em; 
} 



Le regroupement 

Le regroupement consiste a reunir des selecteurs qui ont la meme 
propriete entre les memes accolades au lieu de repeter plusieurs fois les 
proprietes. 



HI { 






font 


-fami ly : 


Georgia, "Times New Roman", Times, serif; 


font 


-size: 1 


lOem; 
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font-weight: normal; 
text-transform: uppercase; 

} 

h2 { 

font-family: Georgia, "Times New Roman", Times, serif; 
font-size: l.lOem; 
font-weight: normal; 
text-transform: uppercase; 

} 

h3 { 

font-family: Georgia, "Times New Roman", Times, serif; 
font-size: l.lOem; 
font-weight: normal; 
text-transform: uppercase; 

} 

Ces proprietes sont regroupees comme ceci : 
hi h2 h3 { 

font-family: Georgia, "Times New Roman", Times, serif; 
font-size: l.lOem; 
font-weight: normal; 
text-transform: uppercase; 

} 

Les fonctions qui simplifient le code allegent le document CSS et la bande 
passante consommee. 



La bande passante 

La bande passante est le debit consomme par un site. Ce debit 
est compose de tous les fichiers qui sont envoyes sur le reseau 
suite a une requete. Les hebergeurs donnent un forfait de bande 
passante pour chaque type de site et les depassements sont factures. 



4.5 L'habillage de la page 

Au debut de ce chapitre, nous avons vu un exemple de balise body. Vous 
pouvez rendre la page plus sophistiquee en caracterisant l'ascenseur 
vertical et l'ascenseur horizontal. 
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\ 

Attention aux couleurs 

Evitez les couleurs qui ne permettent plus de distinguer la 
glissiere de son rail ou qui font prendre le rail pour la glissiere. En 
regie generale, il vaut mieux reserver la couleur plus foncee pour la 
glissiere. 

V J 




Tab. 4.4: Les caracteristiques de I'ascenseurde page 




Designation 


scrol 1 bar-darkshadow-col or 


L'apparence des ombres de la glissiere 


scrol 1 bar-3dl ight-col or 


Couleur pour les effets de relief 


scrol 1 bar-arrow-col or 


Couleur pour le pointeur de defilement 


scrol 1 bar-base-col or 


Couleur de base de la glissiere 


scrol 1 bar-face-col or 


Couleur pour la surface 


scrol 1 bar-highl ight-col or 


Couleur pour le bord haut et le bord 
gauche 


scrol 1 bar-shadow-col or 


Couleur pour le bord droit et le bord du 
bas 


scrol 1 bar-track-color 


Couleur pour le rail de defilement 



Prenons un exemple : 
(voir Figure 4.18) 

scrollbar-base-color: #D19C8C; 
scrol 1 bar-highl ight-col or: #f f ff ff ; 
scrollbar-shadow-color: Iffffff; 
scrol 1 bar-3dl ight-col or: #cc3333; 
scrollbar-arrow-color: #cc3333; 
scrollbar-track-color: IFFECCB; 
scrol 1 bar-darkshadow-col or: #cc3333; 
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Utiliser des couleurs deja presentes 

Une solution pour eviter de faire de votre page un sapin de 
Noel ou de la maquiller comme un camion vole est d'utiliser les 
couleurs dominantes en les repetant ou en choisissant des couleurs 
complementaires. 





maim 




J 




O 




v> 


Adresse * hCtp7 


mm kx 






114 




• • 


-T 

B7 








I* 








3* 














IB» " B7283A 








RWianl Mattt»w Stallman 












■ rMMM 









■4 Figure 4.19 : 

La chemise rouge 
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Deux sites indispensables pour ne pas s'emmeler les pinceaux : 




a Figure 4.20 : Chromographe 
www. pourpre . com/chromograf / 



' ■ (J O l-i-j - i 4'S <0 • T7- _ r> a 




A Figure 4.21 : SmartPixel 
www.smartpixel . net/chromoweb/ 
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4.6 



Relooker des formulaires 



Les formulaires gris ou revetus de l'uniforme Windows ou Macintosh sont 
peu creatifs et caracterisent mal votre site. Repeignez vos formulaires des 
couleurs qui expriment une personnalite. Les inventeurs des feuilles de 
style et des navigateurs ont pense a vous. lis proposent des proprietes 
diverses pour agrementer les formulaires et les rendre moins administra- 
tifs et rebarbatifs. 



Le bouton Submit doit donner envie a l'usager de cliquer dessus. Pour ce 
bouton de formulaire, utilisez le protocole de classe en ajoutant le nom du 
style precede d'un point dans la feuille de style : 

(voir Figure 4.22) 
admin_bouton { 

font-family: Tahoma, Verdana, Arial; 

font-size: lOpt; 

font-style: normal; 

line-height: normal; 

font-weight: bold; 

background-color: IBC4948; 

color: #FFFFFF; 

} 

Puis dans la balise submit, inserez le code comme ceci : 

(voir Figure 4.23) 

<input type="submit" 

val ue="choi si ssez" class="admin bouton"> 



Soumettre un formulaire 
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> 


Adresse • http://www.accesites.com/javascr(jt/formulare_courriel.php v 


• 


Votre avis 






Avez-vous trouve le livre clair et facile d'emploi ? O Oui O Non 




Queues sont les fiches que vous avez preferees ? 












D 






Avez-vous lu tous les chapitres ? O Oui O Non 






Avez-vous pratique Le Coin des Passionnes ? O Oui O Non 




Envoyer k 1 






Envoyez-moi vos remarques sur le 




livre 






| Termme 1121 'i 0 6 * B 


2.00 Ko 17M 





▲ Figure 4.22: Bouton de soumission colore 









> 




Wresse ^ http://vvww.accesitesxom/javascript/formulaire_courriel.prip v ~i 






Votre avis 

Avez-vous trouve le livre clair et facile d'emploi ? O Oui O Non 
Quelles sont les fiches que vous avez preferees ? 






□ 








□ 






Avez-vous lu tous les chapitres ? O Oui O Non 

Avez-vous pratique Le Coin des Passionnes ? O Oui O Non 

1 1 






Envoyez-moi vos remarques sur le 
livre 






Termme if 26 i 0 * B 


1.50Ko IBM 





▲ Figure 4.23: Bouton de soumission avec des caracteres jaunes 
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Comme vous le constatez, vous etes a meme de controler : 

■ le type du caractere font-f ami ly ; 

■ la taille du caractere font-size ; 

■ le style du caractere font-style ; 

■ la hauteur de ligne pour le positionner dans le bouton 1 i ne-hei ght 

■ la graisse du caractere font-weight ; 

■ la couleur de fond background-color ; 

■ la couleur du caractere col or. 



Adresse • http:/Av\v\v.accesites.com/)avascrpt,'formulaire_courriel.php » Q- 



Votre avis 

Avez-vous trouve le livre clair et facile d'emplol ? O Oui O Non 
Quelles sont les fiches que vous avez preferees ? 



Avez-vous lu tous les chapitres ? O Oui O Non 

Avez-vous pratique Le Coin des Passionnes ? O Oui C Non 



Envoyer 



Envoyez-moi vos remarques sur le 

livre * I 

j lit &l)6fta I octets 20M 



A Figure 4.24 : Bouton de soumission 

Vous pouvez ajouter d'autres proprietes. Si les proprietes sont absentes, 
elles affichent des valeurs par defaut. 
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Un peu de couleur sur un menu deroulant 

Un menu deroulant avec ce code retrouve des couleurs et des polices 
dignes de ce nom. Optez pour la classe couleur de la balise select. 



select. couleur{ 

font-family: Tahoma, Verdana, Arial; 

font-size: lOpt; 

font-styl e: normal ; 

line-height: normal; 

font-weight: bold; 

background-color: #607BB2; 

color: IFFFFFF; 

} 



Comme vous le constatez, ce sont les memes proprietes que celles du 
bouton submit vu precedemment. Vous pouvez, comme pour le bouton 
submit, inserer des proprietes qui ajoute une bordure en relief : 



ftt*f Edccm gflthagc Ffljora Groups ftttre Outfc Fcohies Ayfe 

□ -O O 3 - a) - J -<4 -to 4-H <o ■ i-rau * 

Adrcsc • http. //Viww^k«s»cs. axr/)»Y»cr^'cr«x^ngtoLphp " □ • ftcctxrctKr . . TfTPT. 

ft * I .11 '-.I .■. (if, t .mi.- 4'jtMii *JHv.r..riii ilmuM|u)' *i M » «3»ww«. tinrvnV *) «] Ujrhrt «Jr*lt> 



Blaff de polston 
Chlplron 


Blanc-manger 


Crepes de plantain frrtes 




Chaucroute de la mer 




Tarte norma nde 




Pigeon a la roirennaise 




Kouign Amann 




J'ai choisi 





▲ Figure 4.25 : Menu colore 
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border-top-width: thick; 
border-right-width: thick; 
border-bottom-width: thick; 
border-left-width: thick; 
border-top-style: outset; 
border-right-style: outset; 
border-bottom-style: outset; 
border-left-style: outset; 
border-top-color: IFFFFFF; 
border-right-color: #000066; 
border-bottom-color: #000066; 
border-left-color: IFFFFFF; 

Les proprietes enumerees ici concernent la couleur (color), l'epaisseur 
(width) et le style (outset). Les couleurs regoivent les valeurs de code 
hexadecimales. L'epaisseur peut etre thick (epais), thi n (fin) ou medi urn. 
Vous pouvez egalement definir une valeur d'epaisseur de votre choix, 
comme lpx (1 pixel). 

Si quatre valeurs sont attributes a la propriete border-width, separees 
par un espace, elles se referent respectivement aux cotes haut, droit, bas 
et gauche. La priorite va de gauche a droite. Ainsi, s'il n'y a que trois 
valeurs, la plus a droite, en l'occurrence la valeur pour la bordure gauche, 
sera pourvue par defaut. 

border-width: lpx thin medium thick; 

Les styles de bordure permettent d'avoir un effet d'enfoncement (i nset), 
de relief (outset) ou de ligne discontinue (dashed). 

Les listes 

Les listes sont de deux styles : 

■ a puces avec la balise ul ; 

■ ou ordonnees avec la balise ol . 

Comme attribut, vous pouvez, comme vu precedemment, mettre une 
image a la place de chaque puce ou adapter des styles. 
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Tab. 4.5: Differences valeurs de la propriete list-style-type 



Attribut 


Type de marquage 


Type de liste 


decimal 


Numerotation 1., 2., 3., 4., etc. 


ol 


1 ower-roman 


Numerotation i., ii., iii., iv., etc. 


ol 


upper-roman 


Numerotation I., II., III., IV., etc. 


ol 


1 ower-al pha 


Numerotation a., b., c, d., etc. 


ol 


upper-al pha 


Numerotation A., B., C, D., etc. 


ol 


lower-latin 


Numerotation a., b., c, d., etc. 


ol 


upper-latin 


Numerotation A., B., C, D., etc. 


ol 


disc 


Rond plein 


ul 


circle 


Rond vide 


ul 


square 


Puce rectangulaire 


ul 


none 


Rien 


Ul OU Ol 



Essayez divers codes avant de trouver celui qui vous convient : 
(voir Figure 4.26) 

ul { 

1 ist-styl e: square; 
list-style-position: outside; 
color: #960000; 
font-family: verdana; 
font-size: 14pt; 
} 



ul { 

1 i st-styl e-image: url (puce.gi f ) ; 
font-family: verdana; 
font-size: 9pt; 

} 



Double Poche CSS • 547 



4 La realisation du site 



OcMET fiftW >M ^fchSQC r^oft firouCCS QpBnfls Ou£fc ^cqcttcs ^Jc 
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Jr tiMMw tiKS t i'rmr i d.; « uvjv-t-r « muequ* « In e tiMwtG tfiwwv ttlPjam • *jc 
Q fl ■ ■ LiM* 0 


- . CSSLH • * 

w «lnac> a ■ 
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Les regions de France 




A 


■ Alsace 






■ Aquitaine 






■ Auvergne 






■ Basse-Normandie 






■ Bouraoane 






■ Bretagne 






■ Centre 






- Champagne-Ardennes 




V 


• Maw s« 


a UDM 





▲ Figure 4.26 : Listen puces 



Les pseudo-classes 
First-child 

La pseudo-classe f i rst-chi 1 d permet d'agir sur le premier enfant d'un 
selecteur donne. Imaginons que, dans un site, le premier paragraphe qui 
suit le titre des articles serve de chapeau. Au lieu de creer une classe 
chapeau, CSS2 permet de distinguer le premier enfant d'un selecteur 
donne. 



p:fi rst-chi Id { 
font-weight: bold; 
font-style: italic; 
} 

Le premier paragraphe de la page deviendra un chapeau en gras et en 
italique sans qu'il soit besoin de le preciser. Le style sera applique par 
defaut. Par contre, pour une feuille de style appliquee a tout un site, il 
faudra creer une classe a destination des pages sans chapeau. 
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Void les differents articles en magasin 

- 1 epuisette 

- 2 cires 

- 5 paniers de peche 



▲ Figure 4.27 : Premier enfant en gras 

li:first-child { 
font-weight: bold; 

} 

Le premier element de la liste est en gras. Internet Explorer ne reconnait 
pas ce pseudo-element. 

Les ancres 

Les liens dans la plupart des navigateurs sont marques par une couleur par 
defaut selon qu'ils ont ete visites ou non. Les pseudo-classes :link et 
: visited requalifient cette propriete. : 1 ink pointe vers les liens vierges 
et : visited vers les liens visites. 



a: link { 
color: #458; 
} 

a: visited { 
color: #A79; 
} 

II est aussi possible d'ecrire le code de cette facon : 

:link { 
color: #458; 
} 

:visited { 
color: #A79; 
} 
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Les pseudo-classes : 1 ink et : visited s'appliquent uniquement aux 
liens. 



Les pseudo-classes dynamiques 

Les pseudo-classes dynamiques decrivent un etat provoque par un 
evenement. Elles sont au nombre de trois : : hover, : active et : focus. 

: hover decrit les proprietes d'un objet quand la souris le survole. Cet 
objet peut etre un element de liste, un lien. 



Rchier Edition Affichage Aller a Marque-pages Outils 



Deuxieme lien 



http://www.ardaee.com/exemples/index.htm 



▲ Figure 4.28 : Liens et survol 




Hover sur Internet Explorer 

: hover s'applique sur Mozilla pour un element de liste, mais 
pas sur Internet Explorer. 



: acti ve s'applique au moment ou l'internaute clique sur un lien et avant 
qu'il ne relache le bouton. 

: focus s'applique des que l'internaute utilise son clavier, par exemple 
pour entrer une tabulation. 



, Declarer les effets dans I'ordre 

Pour que les effets s'affichent sans s'annuler, il est necessaire 
de les declarer dans un ordre precis : : 1 i nk, : visited, : hover, 
:active. 
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La pseudo-classe :lang 

La pseudo-classe : 1 ang permet de couvrir les besoins lies a la typogra- 
phic et a la syntaxe de chaque langue. 

:lang(fr-CH) > Q { quotes: '« ' 1 »' '<' '>'} /*4 arguments*/ 

Les deux premieres donnees concernent les guillemets et les deux 
dernieres designent les guillemets a l'interieur d'autres guillemets. Le 
code se rpesente avec quatre arguments ou les deux premiers seulement.. 
En francais de Suisse on utilise un double chevron - et un simple chevron 
a l'interieur des guillemets. Pour connaitre les caracteres de guillemets, 
allez sur www. mus . ul aval . ca/roberge/gdrrn/08-codes.htrn. 
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▲ Figure 4.29 : Langues et caracteres 
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- White labels its 

- Les productions independantes 1 1 

- Musica par bailar ^ 



A Figure 4.30 : Liens et langues 

Les pseudo-elements 

Le pseudo-element :f irst-line 

Le pseudo-element :first-line s'applique a la premiere ligne affichee 
dans un paragraphe. Cette ligne est celle qui s'affiche vraiment dans le 
navigateur et sera done differente selon le navigateur, la largeur affichee, 
la taille de la police, l'interlettrage, etc. Ce pseudo-element ne correspond 
a aucune balise HTML. Pour des articles ou l'auteur prevoit un chapeau 
sans creer une nouvelle boite specifique, il est possible d'utiliser ce 
pseudo-element pour creer une premiere ligne en gras. La longueur de la 
premiere ligne depend de Faffichage du navigateur, de la taille de la 
police, etc. 

Situes dans le perimetre du massif forestier de Mervent 

Vouvant, Anne-Marie et Pierre-Jean vous recoivent dans 
leurs gites en sud Vendee dont le paysage sauvage a 
secrete des legendes multiples comme celle du Pont du 
Deluge, de la fee Melusine et d'Ecoute s'il pleut 

▲ Figure 4.31 : Premiere ligne en gras 

Pour la designer precisement, il suffit de mettre un passage a la ligne juste 
a la fin du chapeau avec un <br /> et d'inserer dans la feuille de style : 
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p:fi rst-l i ne { text-weight: bold } 

Dans ce pseudo-element, il est possible de mettre toutes les proprietes de 
font, d'arriere-plan et toutes les proprietes concernant Fespacement de la 
ligne, l'interlettrage, etc. Ce procede risque d'etre envahissant, vu qu'il 
s' applique a tous les paragraphes. 

Le pseudo-element :first-letter 

Cet element specifie les caracteristiques des lettrines. II s'agit des 
premieres lettres d'un paragraphe d'un corps superieur a ce dernier et qui 
se tiennent sur deux, parfois trois lignes. En typographic francaise, les 
lettres suivantes sont en petites capitales. Si la lettrine commence une 
citation, les guillemets ouvrants viennent dans le corps du paragraphe et 
non dans celui de la lettrine. L'utilite de la lettrine dans une page est 
l'ornementation ; elle permet en outre de designer le commencement du 
texte. 

Sur le Web, la creation d'une lettrine est un casse-tete. 

p:fi rst-l etter ( font-weight: bold; text-transform: uppercase; 
font-size: 200%} 

La premiere lettre des paragraphes est plus grande, plus grosse et en 
capitales, mais elle ne descend pas sur deux lignes, comme le fait une 
lettrine. 

La solution est done de mettre la lettre dans une boite flottante. 

.lettrine { 
float: left; 
font-weight: bold; 
text-transform: uppercase; 
font-size: 210%; 
margin-right: lOpx; 
} 

II reste a mettre les lettres restantes du mot en petites capitales. 
font-variant: small -caps; 
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Le resultat est peu harmonieux et approximatif pour beaucoup d' opera- 
tions. Si vous voulez absolument mettre des lettrines, inserez plutot des 
images dans une boite flottante. 



Situes dans le perimetre du massif forestier de Mervent 
Vouvant, Anne-Marie et Pierre-Jean vous recoivent dans 
leurs gTtes en sud Vendee dont le paysage sauvage a secrete 
des legendes multiples comme celle du Pont du Deluge, de la 
fee Melusine et d'Ecoute s'il pleut 



▲ Figure 4.32 : Lettrine 

Les pseudo-elements :before et :after 

Les pseudo-elements : before et rafter servent a inserer un objet avant 
ou apres le contenu d'un element. L'objet peut etre un mot, une 
image, etc. mais pas du code HTML. 

Voici des pseudo-elements tres pratiques pour creer une FAQ (foire aux 
questions). Ces pages sont faites de questions-reponses et ici la question 
est surlignee en jaune avec des caracteres bleus. Le probleme est que 
Internet Explorer n'accepte pas la generation de contenu avec la propriete 
content. 

p.QR 

{ 

background-color: FFEDA6; 
color: 003D6C; 
font-family: Arial; 

} 

p.QR: :before 

{ 

content: "Question: "; 
font-family: Arial; 
font-size: l.lem; 

} 

p.QR: :after 

{ 

content: " ?"; 
font-family: Arial; 
font-size: l.lem; 

} 
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Vu le probleme avec Internet Explorer, il est peut-etre plus judicieux de 
placer le point d' interrogation avec son espace a la main. 




|r*5 Ta-mne 



Questions les plus frequemment posees 



Une fois arrive au Jardin aux Papillons, puis-je me 
garer facilement ? 

Out, voos avez un grand parting gratuit de 500 places en face de le 

Jardir ■ 

Navett* gretutc de lOh I l9h tous les Y* d'heure *n julet et tout 

4cf j'-r c : - y. 

Quelles sont les heures de vi sites ou il y a le moins 
d'affluence ? 

* Nous voos conseiHocs d'tr nvcr le matin des I'ouverture du Jardffi 

J', ■ " ,L J j"^:- . . IT-''..-..- 

les joors de beau temps car les paptflons appreoent 
parbciaerement la lumiere 
■ Pendant les vacances d>te, les jours de week-end connaissent 

ii i : -ii j'.jrf :•: 



Avez-vous des tarifs famille nombreuse ? 

Oui, i suffit de presenter sa carte famie nombreuse SNCF et une reduction de 10 Vo est 
acconfce a toute la famine 

Puis-je faire des photos et videos des papillons et orchidias ? 

■■I r'.-.T mi'-rti,- ritfiinm.iiirti- I.-. nhnfr in jmhi". .iirniliiii'. v trm mv. A: In-; 



▲ Figure 4.33 : FAQwww.jardinauxpapillons.com 



Les filtres 

Plusieurs filtres sont a la disposition du developpeur pour creer des effets 
sur des images ou des textes. lis sont reconnus uniquement par Internet 
Explorer 4 et les versions superieures. lis ne peuvent done etre utilises que 
s'ils ne sont pas essentiels. lis peuvent sembler des gadgets mais certains 
sont interessants pour donner un style aux images d'un site. La propriete 
ne fonctionne que dans une balise en ligne. Sinon, le conseil est de creer 
ces effets directement sur l'image avec un logiciel graphique. 
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alpha 

Le filtre alpha cree dans l'image une transparence. Le parametre 
opacity, qui controle l'opacite, est obligatoire : 0 correspond a la 
transparence maximale, et 100 a l'opacite maximale. 

style permet de choisir les types de degrades : 0 pour uniforme, 1 pour 
lineaire et 2 pour radial. 

Avec style=l, pour integrer un degrade, il faut necessairement indiquer 
une valeur de depart (startx et starty) et de fin (finishx et f i ni shy) 
en pixels ou en pourcentage. 



<img styl e="f i 1 ter: alpha(apacity=50, finishopacity=0, style=2, 
startxX=20, starty=40, finishx=0, finishy=0)" 
src="images/ti tre_ecoute_vrai_l . j pg "> 



Fichier Edition Affichage Favoris OutJIs ? 








^ Precedents • ^ 1*1 \m & s~ 


Rechercher Favoris 


0* & ■ • u ^ •* 




'-. *Jhttp://www.ardaee.comAndexl.php 




v QOK Liens 








ecoule su ^ 




< 




> 








•f . Internet 





▲ Figure 4.34 ; alpha 



shadow 

Ce filtre comporte deux parametres : la couleur en code hexadecimal et la 
direction en degres. L'ombre, contrairement a l'ombre portee de drops- 
hadow, est diffuse. 

filter: shadow (color=#CACACA, direction=45) ; 

dropshadow 

Ce filtre cree une ombre portee, comme si l'image ou le texte se tenaient 
au-dessus d'une surface. Cet effet donne du relief. 
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II accepte quatre parametres : 

■ la couleur de 1' ombre portee ; 

■ le decalage horizontal et le decalage vertical (offX et offY) ; 

■ la position, dont la valeur est un booleen : 1 pour une ombre a 
l'exterieur, 0 pour une ombre a l'interieur de l'element. 

filter: dropshadow (color=##83838C, offX=3, offY=3, positive=l); 

glow 

Ce filtre ajoute un halo de couleur autour de l'image ou du texte. II accepte 
deux parametres : la couleur et la densite. 

filter: glow (color= ID7B5CF, strength=5) ; 

chroma 

Ce filtre permet de definir, dans une image GIF, une couleur comme 
transparente. 

<ittig src="image.gif " styl e="fi 1 ter: chroma (col or=#006699) " 
wi dth=" 133" height="53" al t="image" border="0"> 



Selon le type de media 

Avec CSS2 apparait la prise en compte du format du media vise. 



Tab. 4.6 : Les differents types de medias 


Type 


Application 


media="all " 


Tous les types de medias. 


media="aural " 


Synthese vocale assistee par ordinateur. 


medi a="brai 1 1 e" 


Ce type de media est parametre pour les aveugles. Le 
texte est traduit sur une surface modifiee en braille, 
ce qui permet aux aveugles de lire le texte. 


media=" embossed" 


Le texte est presse en relief, sur une imprimante 
braille, sous forme de structures de surface pouvant 
etre reconnues au toucher sur du papier ou sur un 
materiau comparable, a destination des aveugles. 



Double Poche CSS • 557 




La realisation du site 



Tab. 4.6 : Les differents types de medias 




Application 


media="handheld" 


Cg format s'applique a des assistants numeriques, 
des telephones portables et d'autres agendas 
electroniques. Le format est prevu pour des petits 
ecrans. 


media="print" 


Ce format s'applique a I'imprimante quand 
I'utilisateur desire imprimer. 


medi a= "project i on" 


Ce format concerne les retroprojecteurs et d'autres 
projecteurs video. 


media="screen" 


C'est le format par defaut. II s'applique aux ecrans 
d'ordinateur. 


media="tty" 


Ce media concerne les sorties texte avec une largeur 
invariable, comme les telex. II est aussi interessant 
pour les navigateurs texte de type Lynx. 


media="tv" 


Ce format est celui de I'audiovisuel, comme la 
television, oil le son et I'image se combinent. La 
qualite visuelle n'a pas besoin d'etre parfaite. 



Pour les navigateurs qui n'implementent pas CSS2, on emploie genera- 
lement la regie @import, qui permet d'importer les feuilles de style. Elle 
n'est pas reconnue par les anciens navigateurs. 

<html> 
<head> 

<title>Titre du fichier</title> 

<style type="text/css"> 

<!-- 

(Pimport url (impression. ess) print, embossed; 
CHmport url (portabl e.css) handheld; 
(Pimport url (normal .ess) screen; 
--> 

</styl e> 

</head> 

<body> 

</body> 

</html> 
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La regie ©import 

W La regie @import s'insere dans une feuille de style, qu'elle soit 
interne ou externe. 



Pour imprimer, il est preferable de gommer les couleurs et d' avoir le 
meilleur contraste possible entre le texte et le fond de page. Les menus ne 
sont pas utiles. En revanche, les liens de reference qui eclairent le propos 
par des pages annexes, doivent etre explicites et complets. La feuille de 
style pri nt doit tenir compte de tout cela. Le code qui suit est tire du site 
www.ardaee.com et permet de ne pas afficher les images, d'avoir des 
caracteres noirs sur un fond blanc, de decliner les liens en entier et en clair, 
de ne pas imprimer les menus de navigation, d' afficher une marge sur des 
navigateurs compatibles CSS2. Internet Explorer imprimera bien la page 
mais sans les liens en clair. De ce fait, il est utile d'inserer le nom de 
domaine dans le pied de page. 

body { 

color: #000; 
background: #fff none; 
font-family: arial, sans-serif; 
font-size: lOpt; 
line-height: 12pt; 
} 

#navidroite, Inavigauche { 
display: none; 

} 

img, #titre img { 
display: none; 

} 

#corps { 

width: auto; 
margin: 0 5%; 
padding: 0; 
border: 0; 

float: none limportant; 
color: black; 

background: transparent none; 
} 

.pied { 

margin: 3% 10%; 
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} 

a { 

color: gray; 

background: transparent; 
font-weight: bold; 
text-decoration: none; 

} 



a:link:after { 

content: "(" attr(href) ")"; 

font-size: 90%; 

} 

a [href] : after { 

content: " (http://www.ardaee.com/" attr(href) ") "; 
} 

a[href~="http://"] :after { 

content: " (" attr(href) ") "; 

} 

a[href~="#"] :after { 
content: ""; 
} 

Les liens sont mis en gris et les liens relatifs sont transformed en absolus. 
Comme il n'existe pas de recherche d'un "non-motif", c'est-a-dire de mots 
qui ne contiennent pas le motif, l'astuce consiste a ajouter le lien directeur 
du site a tous les liens puis de l'enlever sur les liens externes. Le dernier 
selecteur enleve les ancres qui envoient vers un point de la page 
elle-meme. 



Figure 4.35 : 

Prete a imprimer 




560 • Double Poche CSS 



Relooker des formulaires 



Bidouillages et defaillances autour d'lnternet 
Explorer 

Cependant, la venue d'lnternet Explorer 7, qui ajoute encore de la 
complexite sans apporter de la conformite, va compliquer davantage le 
developpement des sites. II faut esperer que ce navigateur perde des parts 
de marche au profit de Firefox ou d'autres navigateurs compatibles pour 
simplifier le developpement des sites. 

Le probleme des bidouillages de la feuille de style est que celle-ci n'est 
plus conforme et peut amener des bogues avec les navigateurs du futur. 




Mac ou PC 

Les versions Mac et PC d'lnternet Explorer ont ete creees par 



deux equipes independantes, qui ont done produit deux logiciels 
differents. 

v J 



Le selecteur * html (revele a Internet Explorer PC 
seulement) 

Ce selecteur represente la balise html comme descendant d'un element 
quelconque, ce qui est une selection impossible car la balise html est 
l'element racine des pages HTML. Un navigateur normal ignore ce 
selecteur car il ne correspond a rien. Internet Explorer lui en tient compte. 

divlcorps { 

position: absolute; 

max-width: 600px; 

margin: 0 250px; 

padding: 0 20px 20px 20px; 

background-color: IE2EA8A; 

} 

* html div#corps { 
width: 600px; 

} 



Double Poche CSS • 561 



4 La realisation du site 



Le probleme avec Internet Explorer est que, si la propriete wi dth n'est pas 
presente, la largeur n'a plus de limites. Ici le selecteur * html di v#corps 
n'est reconnu que par lui. 

Le selecteur enfant, adjacent ou le selecteur 
d'attribut (cache a Internet Explorer PC seulement) 

Pour cacher certaines regies a Internet Explorer PC, il suffit d'utiliser le 
selecteur enfant qu'il ne reconnait pas. 

html>body div#corps { 
max-width: 600px; 

} 

Ici, il ne reconnait pas la propriete max-wi dth, mais elle lui est cachee par 
la presence du caractere >, qui designe un selecteur enfant. 

td+td+td: after { 
content:url (acheter.png) ; 

} 

Ici, les acheteurs potentiels qui utilisent Internet Explorer ne pourront rien 
acheter car ils ne verront pas 1' image qui les renseigne. En effet, le 
selecteur est adjacent et le pseudo-element : after n'est pas reconnu, ni 
content d'ailleurs. 

Les selecteurs d'attribut ne sont pas reconnus par Internet Explorer : 

a[href |="http"] { 

color:#Z61; 

} 

Le commentaire (cache a Internet Explorer Mac 
seulement) 

Internet Explorer Mac voit l'antislash comme un signe d'echappement, y 
compris dans un commentaire. Par consequent, dans ce qui suit, il ne voit 
pas la fin du commentaire de la premiere ligne et il prend en compte la 
deuxieme ligne de code. 
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.nav {width:200px} 




/* IE MAC ne voit pas la fin de commentaire 


a cause de 


1 'antislash \*/ 




.nav {width: 150px} 




/* IE MAC voit un commentaire sur 3 lignes, 


cette ligne 


incluse */ 





nav a une largeur de 150 px, sauf pour Internet Explorer Mac qui affiche 
une largeur de 200 px. 



Le commentaire (revele a Internet Explorer Mac 
seulement) 

Internet Explorer pour Mac ne voit pas l'asterisque masque par un 
antislash et qui ferme le commentaire pour tous les autres navigateurs. 

.nav {width:200px} 
/*IE Mac ne voit pas l'asterisque qui suit 1 'antislash \*//V 
.nav {width:250px} 

/**/ 

nav a une largeur de 200 px, sauf pour Internet Explorer Mac qui voit une 
largeur de 250 px. 

Le blanc souligne (revele a Internet Explorer PC 
seulement) 

Internet Explorer PC ignore le blanc souligne appose devant une pro- 
priete. Les autres navigateurs ne le prennent pas en compte et le voient 
comme une erreur de code. 

.nav {_width:250px;width:200px} 

nav a une largeur de 200 px, sauf pour Internet Explorer PC qui voit une 
largeur de 250 px. 

min-height et min-width (caches a Internet Explorer 
PC et Mac) 

min-height etmin-width,max-height etmax-width sont des proprietes 
indispensables pour des conteneurs dont on ne connait pas la taille du 
contenu et surtout dans un contexte ou 1' architecture de la page est 
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extensible selon la definition de l'ecran de l'internaute. Or Internet 
Explorer les ignore, ce qui pose des problemes pour la mise en page avec 
des colonnes sous forme de boites. 

Une solution consiste a utiliser une image de fond pour avoir une hauteur 
ou une largeur minimale. II est aussi interessant de mettre un wi dth ou un 
height dans un selecteur qui est vu uniquement par Internet Explorer. 
Reprenons le premier exemple de cette section. 

div#corps { 

position: absolute; 

max-width: 600px; 

margin: 0 250px; 

padding: 0 20px 20px 20px; 

background-color: IE2EA8A; 

} 

* html div#corps { 
width: 600px; 

} 

Pour remedier au fait que Internet Explorer ignore la propriete 
mi n-hei ght, la solution consiste en un ensemble de deux conteneurs, l'un 
dans l'autre. Le conteneur exterieur a un padding equivalent a cette 
hauteur minimale requise et le conteneur interieur est dote d'une marge 
negative equivalente. 

<style type="text/css"> 

#out-min-height { 

padding-top:200px; 
/* voici le mi n-hei ght (200px) */ 

min-height: lpx; 
/* pour Opera */ 

} 

#in-min-height { 
margin-top: -200px 
/* pour compenser le padding-top */ 
} 

</styl e> 
<body> 

<div id="out-min-height"> 
<div id="in-min-height"> 

Votre contenu ici, long ou court a votre guise. 

</di v> 

</div> 

</body> 
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margin et padding 

Les marges internes et externes sont gerees differemment par les naviga- 
teurs. Chacun fait sa "cuisine" pour definir les marges des elements. C'est 
pourquoi, des l'entree, il est preferable de remettre tout a 0. 

body { 
margin: 0; 
padding: 0; 

} 

Cette portion de code aide a positionner des elements dans une page de 
maniere plus precise en mettant tous les navigateurs sur le meme reglage. 
Sinon les marges par defaut des differents navigateurs vont fausser 
l'affichage. 

Internet Explorer 7 

Internet Explorer 7 est un projet dirige par Dean Edwards, qui consiste en 
une bibliotheque JavaScript compensant les manques d'Internet Explorer. 
Ces caracteristiques sont les suivantes : 

■ II repond aux selecteurs CSS suivants : 

- parent > enfant ; 

- frere + adjacent ; 

- frere ~ adjacent ; 

- [attr], [attr="valeur M ], [attr~="valeur M ] ... 

- Classes multiples (reparent certains bogues). 

- : hover, : active, : focus (pour tous les elements). 

- : before, : after, content:. 

- :lang(). 

■ II fonctionne avec des documents HTML ou XML indifferemment. 

■ II applique les feuilles de style importees. 

■ II preserve la cascade dans la feuille de style. 

■ II ne modifie pas la structure du document. 

■ II ne fait pas appel sans cesse a la structure DOM du document. 

■ II utilise du pur CSS pour suppleer aux regies CSS. 
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■ II accepte le modele de boite du W3C. 

■ II accepte la position fixed (exempte de scintillement). 

■ II accepte overflow:visible. 

■ II accepte min/max-width/height. 

■ II accepte la transparence alpha des PNG. 

■ Script poids leger (22 K). 

■ II est entierement modulaire. 

■ II fonctionne pour Microsoft Internet Explorer 5+ (Windows 
seulement). 

Comme cette application en JavaScript est formatee en modules, le 
developpeur utilise les modules dont il a besoin sans etre oblige de 
prendre l'application entiere. La meilleure facon de faire est de constraire 
le site normalement, puis de tester dans divers navigateurs et de remedier 
aux problemes avec les bidouillages proposes. Enfin, si certaines erreurs 
sont redhibitoires, utilisez Internet Explorer 7 pour les gommer. II faut 
quand meme prendre en compte le fait que certains internautes ont 
desactive la fonction JavaScript sur leur navigateur. 

Ce genre d'application est un gain de temps et permet d'utiliser par 
exemple les pseudo-elements : before et : after pour creer des cadres, 
ou du moins de placer un haut pour les coiffer et un bas pour les chausser. 

#cadre: before { 
content:url (haut.png) ; 

} 

#cadre:after { 
content:url (bas.png) ; 

} 

#cadre { 

background- col or:#b9b9b9; 
border: lpx solid #555; 
width:200px; 

} 

Ce genre de code est infaisable habituellement car Internet Explorer 
n' accepte pas ces pseudo-elements. 

On trouve Internet Explorer 7 sur le site de Dean Edwards 
(http://dean.edwards.name/IE7/). 
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hr 

<hr /> est la balise utilisee pour figurer une ligne de separation. Elle est 
peu employee. Mais avec les CSS, elle reprend du service. 

Pour avoir un trait de separation simple avec une CSS, il faut un code 
assez simple. 

hr { 

border: 0; 
width: 80%; 

} 

Pour creer un trait plus epais en bleu, il faut caracteriser le fond et le 
contour de la meme couleur. 

hr { 

color: #00F; 
background-color: #00F; 
height: 5px; 

} 

Ici, il faut utiliser, a la fois, les proprietes color et background-color. 
La premiere propriete est inseree pour Internet Explorer tandis que la 
deuxieme est presente pour les autres navigateurs. 

II est interessant d' utiliser une image comme separateur pour afficher un 
motif grace a une astuce. 

<div cl ass="hr"xhr /></div> 

Ce code XHTML est nourri par la feuille de style : 

div.hr { 
height: 15px; 

background: transparent url (motif .gif) 
no-repeat scroll center; 

} 

div.hr hr { 
display: none; 

} 

Pour Internet Explorer, <hr /> est un element en ligne d'une hauteur de 
7 pixels par defaut avec des paddi ng haut et bas figes a 7 pixels. Avec un 
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display: block et une marge negative de 7 pixels, le trait est affiche 
correctement sur Internet Explorer. 

<style type="text/css"> 
hr { 

display:block; 
height: lpx; 
margin: 0; 
_margin: -7px 0; 
padding: 0; 
color: #03A; 
background-color: #03A; 
border: 0; 
} 

</styl e> 
<body> 

<div>Premier contenu</div> 
<hr /> 

<div>Second contenu</di v> 
</body> 

Le blanc souligne devant margi n rend cette propriete invisible a tout autre 
navigateur que Internet Explorer. 

Ici les deux contenus sont separes d'une ligne bleue de 1 pixel d'epaisseur 
sans aucune marge. Une fois les marges a 0, tout ce que le developpeur 
ajoute comme marge dans les di v ou dans le hr - en plus des 7 pixels de 
marge negative - .est comptabilise, par exemple margi n : 6px appose une 
marge d' 1 px. 

4.7 Conclusion 

Apres avoir aborde les differents aspects du code, il s'agit de le verifier sur 
le terrain et de completer sa connaissance au contact de la "realite" dans 
le prochain chapitre. 
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Une etude de terrain pour recolter des connaissances en CSS demande 
d' avoir Firefox et son extension Web Developer. Cette extension permet 
de decouvrir ce qui se cache derriere un beau site. 

Les peintres vont au Louvre, les ecrivains lisent des livres puis ecrivent "a 
la mode de", les developpeurs de sites web vont a la peche avec Firefox 
et Web Developer, non pour plagier, mais pour emprunter des elements 
interessants afin d'enrichir leur expression personnelle et surtout de savoir 
comment a ete fabrique un site. 

La feuille de style est parfois illisible sans le code source, qui lui-meme 
est illisible car trop touffu, trop long, trop complexe. La solution est 
d'utiliser Fediteur de feuille de style de Web Developer et de constater les 
changements operes sur la page du site, a la suite d'une modification de 
couleur entre autres. 

Cette galerie de sites met en avant de bonnes pratiques ou du code 
particulierement interessant. Parfois Fergonomie ou Faspect visuel sont 
remarquables. Ce chapitre permet de verifier in situ les differents aspects 
d'un site web. 

5.1 Quelques sites 

Les quelques sites presentes ont ete choisis dans des domaines differents, 
pour leur charte graphique harmonieuse et leur approche originale du code 
ou d'une partie du code CSS. 

Un site communicant 

Le premier site communique beaucoup et bien autour de ses choix de code 
CSS et de leurs consequences (peu importe le code relatif aux menus 
dynamiques). L'auteur a une volonte de partager ses trouvailles, de 
beneficier de Fecho des webmasters qui Futilisent et ainsi de Fameliorer. 
C'est exactement la philosophic des applications distributes sous des 
licences "open source". 

L'auteur designe les elements invariables du code et les elements qui 
peuvent etre modifies sans interferer avec la fonctionnalite du menu. C'est 
une vraie documentation, qui fournit des indications concretes sur la page, 
ainsi que sur des classes ou des identifiants. 
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Vtwr rdncn Hfc+w •• tfa A " < 1 • - > ;• Ojtfc 



NVENUE 



JS Mon site perso est dedie a mes trois passions 
i — .I'informatique, la musique et la Roumanie. 




▲ Figure 5.1 : Le site iubito 

Le script a ete trouve sur le site http://iubito. free . f r. II est propose 
sur le site www.openweb.eu.org, la reference en matiere de CSS et 
d'accessibilite. 




▲ Figure 5.2 : Openweb.eu.org 
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. ssmenu ul , . ssmenu 1 i { 
/* Ne pas trop toucher. 

Les items (les <li>) des sous-menus, notamment pour 

enlever les puces des listes */ 

paddi ng :0; 

margin:0; 

1 i st-styl e-type:none; 



.menu a, .ssmenu a, .menu a:visited, .ssmenu a:visited { 
/* Les liens qui ne sont pas sous le curseur. */ 

color:white; 

padding:2px lpx; 

text -decoration: none; 
/* Ne pas modifier le block, margin et width */ 

di spl ay :block; 

margin:Opx; 

width: 100%; 

html>body .menu a, html>body .menu a:visited, html>body 
.menu a:hover, html>body .menu a:active, 
html>body .ssmenu a, html>body .ssmenu a:visited, html>body 
.ssmenu a:hover, html>body .ssmenu a:active { 
width:auto; 



.ssmenu ul:hover, .ssmenu a:hover, .ssmenu a:focus, 
.menu a:hover, .menu a:focus { 
/* Les liens sous le curseur. 

On change les couleurs du texte et de fond, et on 
enleve le soul ignement. */ 

background-col or:#EFB; 

color:black; 

text -decoration: none; 



img { 

/* Si on met une image dans un lien (par exemple 
un logo a gauche du lien), pas de bordure 

car c'est vilain :-p */ 

border:none; 

} 

.ssmenu img { 

/* un petit espacement entre 1 'image et le texte du lien 
<a href="..."ximg.../>bl abl a</a> */ 
margin-right:2px; 

} 
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.ssmenu img.hr { 

/* Encore un peu experimental, un <hr /> entre deux items 
pour faire un "separateur"... */ 

margi n-top: lpx; 

margi n-bottom: lpx; 

margin-left:0; 

margin-right:0; 

width: 100%; 

di spl ay :block; 

} 

/* 

Bref... pour resumer, ce qui est a modifier a la base, c'est : 

- couleurs, police, bordure. 

- l'effet special IE pour les ssmenus si on aime ga... 

- police et couleurs des liens "non survoles" et "survoles". 

7 

Voila comment il faut ecrire son code. Les commentaires sont dignes d'un 
manuel d'utilisation. 

Un site appetissant 

Quand le visiteur arrive sur le site marmiton.org, tout festonne de fruits et 
de legumes, il a deja l'eau a la bouche en voyant les differentes recettes 
proposees. Le site est visible en 800 x 600 pixels et optimise pour 
1 024 x 768 pixels. Au-dessous de la banniere principale figure une 
banniere de publicite, encadree par des guirlandes de fruits et legumes qui 
donnent un effet de relief et cassent V arrangement geometrique de 
l'ensemble. Les couleurs sont printanieres et se declinent dans les verts, 
les jaunes et les oranges, avec une pointe de rouge (voir Figure 5.3). 

Le site se devoile sur la droite avec le menu donnant acces a la version en 
anglais et un feston de fleurs et de fruits (voir Figure 5.4). 
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La navigation se fait au moyen d'onglets sis sur la banniere, qui se 
deroulent sous forme de menus dynamiques en CSS. La page d'accueil est 
structured sous forme de boites autour des recettes, avec un moteur de 
recherche, une mise en avant d'un plat ou des propositions de menus. Le 
site est irrigue par une communaute de membres. Pour acceder a l'espace 
personnel, il faut cliquer sur l'onglet. Le formulaire d' identification 
apparait. 



Fichier Edition Affichage Aller a Marque-pages Ougls ? 

~ - http://www.rnarmiton.org/general/horrie.cfm 




3o« 1ST 



;©n.<stg 



La CowvYftiMvawtc At$ SowrTAatvtAs 



f Aujourd'hui 32869 recette 



126250 con 
attendent ! 



Coin partake} Shopping 



Trouver ur 

mots-cles 



► Recherche avaneee 

Trouver une idee 

Choisissez... v | 




Poivrons farcis au comte 

Veau en aillade a 
I'ariegeoise 

Filets de poisson au curry 

Papillate de fruits frais 
sauce orange vanille 



Intcrivez vcu. 
tettre hebdc 



Photos de la semaine.. 



i noire 



http://www.marmiton.Org/general/home.cfrn# 



a Figure 5.5 : Menus 



Sur ce site, le developpeur s'arrange astucieusement pour qu'on oublie les 
cadres et donner du relief a chaque boite de rubrique. En regardant la 
feuille de style, on decouvre la cuisine du site. 

Chaque boite est coiffee d'une image qui donne l'impression du relief, qui 
casse les lignes droites, tout en arrondissant les angles. Certaines de ces 
boites sont pourvues d'une deuxieme image qui leur sert de socle. 
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Trcuver une recette 
mots-cles 




» Utektrrhr avancee 



Trcuver une idee 



H 



i Choisissez... k 

> des amis a I'improviste ? 

> je debute 

> un plat par pays ou region 

> de grand repas / buffet 

> resoudre un pb technique 



gastronome 
eccncme , 



I 



< Figure 5.6 : 

Botte du moteur 
de recherche 



m 



Le code source de la boite de recherche dans les recettes se presence dans 
une table et une colonne. 



<div id="mrm content main"> 




<table id="mrm content table"> 




<tr val ign="top"> 




<td> 




<!-- colonne gauche --> 




<div id="mrm content columnl"> 




<!-- panneau de recherche --> 




<div id="mrm panel search"> 




<div id="mrm panel search 2"> 




<div id="mrm panel search recipe"> 


<img /> 


<div id="mrm panel search recipe info 


><form> 


</form> 




</di v> 




</div> 




<div id="mrm panel search idea"> 




<img /> 




<div id="mrm panel search idea info"> 




<form>... 
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</form> 
</di v> 
</di v> 
</di v> 
</div> 

La page est faite de tables imbriquees qui encadrent des boites. La boite 
de recherche de menus est constitute de six boites imbriquees. Le style 
des colonnes precise une position relative, excepte pour la colonne 3, dont 
les codes ont ete desactives sous forme de commentaire. 

#mrm_content_tabl e{ 
width: 100%; 
margin: Opx; 
padding: Opx; 

} 

.mrm_content_tabl e_col 1{ 
width: 246px; 

} 

.mrm_content_tabl e_col2{ 
width: 231px; 

} 

.mrm_content_tabl e_col3{ 
width: 225px; 

} 

#mrm_content_col umnl{ 
position: relative; 
top: 24px; 
left: 20px; 
width: 469px; 

} 

/*#mrm_content_col umn2{ 

)*/ 

#mrm_content_col umn3{ 
position: relative; 
width: 702px; 

} 

Le principe des tables et des boites n'est pas orthodoxe, mais il est efficace 
dans tous les navigateurs. Par contre, il deroge aux principes d'accessi- 
bilite puisque les tables ne sont la que pour assurer la forme generale de 
la page et distribuer les differents elements sans qu'aucune propriete 
comme summary ne le formule clairement. Le chapitre suivant passe en 
revue quelques regies. Cela dit, l'habillage de ces boites est remarquable. 
Pour habiller la boite de recherche, le developpeur utilise trois images qui 
sont inserees en tant qu'images de fond sur trois boites imbriquees. Trois 
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proprietes permettent a ces images d'etre positionnees la ou elles doivent 
l'etre : background-image:url, background-position et 
background-repeat. 



#mrm_panel_search{ 
position: absolute; 
top: Opx; 
left: Opx; 

background-color: IE6E731; 
background-image:url (" panel _search_t op. gi f ") ; 
background-posit ion: top; 
background-repeat: no-repeat; 
width: 227px; 
height: 258px; 
padding: Opx; 
margin: Opx; 

/*border: solid lpx #FFE16D;*/ 



#mrm_panel_search_2{ 
position: absolute; 
height: 258px; 

background-image: url (panel_search_bottom.gi f ) ; 
background- repeat: no-repeat ; 
background-position: bottom center; 
padding: Opx; 
margin: Opx; 



#mrm_panel_search_recipe{ 
position: relative; 
top: 17px; 

background- image: url (" panel _search_l eaf . jpg") ; 
background- repeat: no-repeat ; 
background-position: bottom left; 
height: 135px; 



#mrm_panel_search_reci pe_info{ 
padding-left: 20px; 
padding-right: 20px; 
padding-bottom: 25px; 
text-align: center; 



/' 




Search 



********************* 



7 



#mrm_panel_search_idea{ 
position: absolute; 
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top: 156px; 

} 

#mrm_panel_search_idea_i nfo{ 
display: block; 
margin: Opx; 
padding-top: 5px; 
padding-left: 20px; 
padding-right: 20px; 
text-align: center; 

} 

^*************** Panel • Search *******/ 

Les differents elements sont clairement etiquetes et donnent des indica- 
tions claires a la personne chargee de maintenir le site. 

Le site est beau, bien concu, pense pour seduire le visiteur par son design 
et la presentation du contenu, ainsi que par le ton et les differentes aides 
qui guident le nouveau visiteur. 

Un site design 

Le site de Jeremie, www.imerege.com, est original par son design propre 
et clair. Sa charte graphique est coherente, entre le vert et V orange. Le jeu 
sur la typographic concourt a l'harmonie de l'ensemble (voir Figure 5.7). 

La page d'accueil (www.imerege.com/home.php) est faite de boites qui 
contiennent d'autres boites. Les cinq boites principales sont conteneu- 
rheader, conteneurmenu, conteneurcontenu, contenunews et conte- 
neurcopy right, toutes contenues dans un conteneur general. 



conteneurgeneral { 
width: 770px; 
margin-right: auto; 
margin-left: auto; 
text-align: left; 

} 

La boite conteneurgeneral a une largeur definie et des marges qui 
s'adaptent a la largeur de l'affichage du navigateur pour se centrer sur un 
fond noir. 

La presentation est claire, avec une hierarchie qui part du general au 
particulier, c'est-a-dire que la feuille de style commence avec les 
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selecteurs body, a, itng. Puis le developpeur decline le conteneur general 
puis chaque conteneur important en partant du conteneur d'en-tete 
jusqu'au conteneur du copyright. Chaque partie est clairement separee par 
des lignes blanches et une enseigne formee de pointilles encadrant le titre. 



I Fichier Edition Affichage Aller a Marque-pages OuMs 



!.. f J i 



egare, curieuK, ou ecolo. Pourquoi "think 



surement pas eKempt de defaut 



3BB8 



Sl; Parte que tous les gouts sont dans la natur 

™ ' chcijii dsn." quel eriuircrin* merit vou; SGuhiite; 

p| 5 Keskidi ?? Bon, le plus simple c'sst d'aller voir, 

■ Dans cet espace sont regroupes tous me: 

I 3DO realises sans but particulier I debut;, delire;, b 
a de tout et de Men :o) 



"J,»"i™, ' "*' ""' " pr.c.d.nt... M>»n<... Ap.i. p. 

• utres projets, grinds voyigsj 

fQ suffisament correcte pour etre qualifies de "semi-profesiionnals".,. (an repencher dessus. D'ici peu je 

lifl construction) dewrai; uploader de; photo; de 



uous proposer des motifs symp; 
pour T-shirt, 

Et qui sait, changer unpeu ce 



|(^ Term me 



▲ Figure 5.7 : imerege.com 
body { 

font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 9px; 
color: #FFF; 
margin-top: 12px; 
padding: 0; 

background-col or: #000; 
text-al ign:center; 
scrollbar-shadow-color: #294931; 
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scrol lbar-darkshadow-color: #294931; 
scrol lbar-3dl ight-color: #294931; 
scrollbar-highlight-color: #294931; 
scrollbar-face-color: #294931; 
scrollbar-track-color: #294931; 
scrollbar-arrow-color: #546656; 

} 

a{ 

text-decoration: none; 
font-weight: bold; 
color: #FFF; 

} 

a:hover{ 

text-decoration: underline; 

} 

img{ 

border: 0; 



Les indications concernant l'ascenseur sont vues uniquement par les 
navigateurs Internet Explorer et compatibles. 




▲ Figure 5.8: Le conteneur d'en-tete 



La boite conteneurheader contient tout ce qui apparait en en-tete sur la 
page. Elle contient surtout F image qui permet d'identifier le site et la boite 
pour l'edito posee par-dessus. 

conteneurheader{ 
height: 239px; 

background-image: url (images/header_fond_automne. jpg) ; 
border-top: lpx solid black; 

} 

Dans le site, chaque rubrique est annoncee remarquablement par un mot 
stylise accompagne en filigrane par un mot ecrit simplement. Le seul 
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bemol est l'accessibilite : cette etiquette est une image de fond qui ne 
contient pas de balise al t pour donner une legende a l'image. 

<div cl ass="conteneurgeneral "> 
<div cl ass="conteneurheader"> 
<div cl ass="edi to"> 

<div class="editohome"x/div> 
<p class="editotxt"> 

Bienvenue sur mon site... 

</P> 
</div> 
</di v> 

Le conteneur edito contient le conteneur editohome. Ce dernier ne 
contient rien excepte une image de fond qui est l'etiquette edito. La 
position est fiottante a gauche. Le texte, a travers la classe editotxt, se 
colle directement a l'image. Tout est bien ordonne car apres edi tohome, 
vient le style edito de chaque page du site, qui est le meme partout. 
L'auteur a sans doute voulu se garder toute latitude pour modifier une 
boite edito pour une page donnee, sinon il aurait utilise la classe 
editohome pour chaque page. 



Bienvenue sur mon site, visiteur passionne, 
egare, curieux, ou e'colo. Pourquoi "think 
ecolo" vous demandez-vous? Le "think 
different" etait deja pris, alors j'ai du 
trouver quelque chose d'autre :o). 
Ceci est mon premier vrai site, fait avec 
mes petites mains a moi. Il n'est done 
surement pas e»empt de defauts de 
jeunesse, mais j'espere qu'il va vous plaire. 
Sinon uous connaisse; le principe: e'est la 
petite croiK en haut a droite! 



▲ Figure 5.9: Le conteneur edito 

/* HEADER */ 

.edi to{ 

border: lpx solid black; 

width: 405px; 

height: 145px; 

background-color: #214129; 

margin: 20px 0 0 345px; 

padding: 5px; 

text-align: justify; 

} 

.editohome{ 
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width: 185px; 
height: 145px; 
float: left; 

background-image: url (images/header_edito_automne.gif) ; 

} 

.editoskins{ 
width: 185px; 
height: 145px; 
float: left; 

background-image: url (images/header_ski ns_automne.gi f) ; 

} 

.editotxt{ 

margin-top: 0; 



Chaque lien possede un titre et affiche une legende au passage de la souris. 
Ces boites sont seulement des elements d'une liste sans marqueur. 




< Figure 5.10 : 

Le menu et le 
titre au passage 
de la souris 



<div cl ass="conteneurmenu"> <ul cl ass="menu"> 

<lixa cl ass="menuhome" href="home.php" ti tl e="Home"x/ax/l i> 

<lixa class="menuskins" href="skins.php" 

ti tl e="Choi si ssez votre envi ronnement !"x/ax/li> 

<lixa cl ass = "menul abo" href="labo.php" 
title="Mon espace d'experimentation"x/ax/li> 

<1 iximg src="images/menu_portfol io_automne.gi f " 
alt="en construction" title="en construction" 
width="94px" height="30px" /> 
<!--<a cl ass="menuportfol io" href="portfol io.php" 
title="Mon portfolio professionnel "x/a>--x/l i> 

<lixa cl ass="menuwebmaster" href="webmaster.php" 
title="Moi, moi et moi"x/ax/li> 

<lixa cl ass="menuhumeurs" href="humeurs.php" 
title="Humeurs"x/ax/l i> 

<lixa cl ass="menul iens" href="l iens .php" 
title="Ma selection de 1 iens"x/ax/l i> 

<lixa cl ass="menucontact" href="contact.php" 
ti tl e="Me contacter"x/ax/l i> 

</ul> 
</div> 
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Normalement, il n'est pas possible de cliquer sur un lien qui ne contient 
pas de mot ou d'image. Ici en fait, le lien est forme de tout le bloc grace 
a la propriete display: block. Le bloc est forme, non seulement par 
F element de la liste, mais aussi par l'image de fond qui lui donne sa 
surface. Chaque bloc a pour largeur la valeur de la propriete wi dth. Cette 
astuce est la bienvenue dans la mesure ou, sans elle, Internet Explorer ne 
reconnait pas un element de liste comme un bloc, malgre la propriete 
display: block. 



.conteneurmenu{ 

background-color: #526552; 
height: 30px; 

border-top: lpx solid black; 




/* MENU 


.___*/ 




ul{ 

margin: 0; 
padding: 0; 

} 






li { 
float: left; 

list-style-type: none; 
padding: Opx; 
margin: 0 0 0 20px; 
border: Opx; 




; 

a.menuhome{ 
width: 48px; 
height: 30px; 
background-image: 
display: block; 

} 


url (images/menu 


home automne.gif) ; 


a.menuskins{ 
width: 49px; 
height: 30px; 
background-image: 
display: block; 

} 

a.menulabo{ 
width: 41px; 
height: 30px; 
background-image: 
display: block; 

} 


url (images/menu 


skins automne.gif) ; 


url (images/menu 


labo automne.gif) ; 


a.menuportfol io{ 
width: 94px; 
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height: 30px; 

background-image: url (images/menu_portfol io_automne.gif) ; 
display: block; 

} 

a.menuwebmaster{ 
width: 104px; 
height: 30px; 

background-image: url (images/menu_webmaster_automne.gif) ; 
display: block; 

} 

a.menuhumeursf 
width: 79px; 
height: 30px; 

background-image: url (images/menu_humeurs_automne.gi f ) ; 
display: block; 

} 

a.menul iens{ 
width: 41px; 
height: 30px; 

background- image: url (images/menu_l i ens_automne.gi f ) ; 
display: block; 

} 

a.menucontact{ 
width: 80px; 
height: 30px; 

background-image: url (images/menu_contact_automne.gi f ) ; 
display: block; 

} 



Une marge est fixee a gauche, de 20 pixels, pour mettre un peu d'espace 
avant chaque element du menu. Cette marge est commandee par la 
propriete margin: 0 0 0 20px dans le selecteur li. 

Le menu est double par un autre menu vertical, qui explique un peu 
chaque rubrique. Le deuxieme menu vertical est forme d'une colonne (une 
boite) dans lequel s'echelonne un ensemble de boites contenul i gnehome. 
Les boites s'empilent les unes sur les autres et chacune contient elle-meme 
deux boites. La premiere des boites, contenubande, a un fond d'une 
couleur legerement plus claire, qui cree une bande verticale, tandis que la 
deuxieme boite, contenuhome, contient le commentaire sur la rubrique 
(voir Figure 5.11). 

Cette disposition permet a chaque paire de boites d'etre parfaitement 
alignee. 
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l Figure 5.11 : Le menu vertical 

.contenuhome{ 

margin-left: 95px; 
height: 100%; 
text-align: justify; 

} 

. contenul ignehome{ 

margin-bottom: 20px; 
width: 450px; 
float: left; 



.contenubande{ 
width: 85px; 
text-align: center; 
font-weight: bold; 
color: #DDD; 
float: left; 
height: 100%; 



} 



Le code XHTML se decline done en une succession de boites qui se 
termine par le formulaire d'inscription a la lettre d'information. 

<di v cl ass="conteneurdescri ptionhome"> 

<div cl ass="contenul ignehome"> 

<div cl ass="contenubande"xa href="skins.php"> 

<img src="images/home_ski ns_automne.gi f " width="50px" 
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height="42px" alt="Choose your way !" title="Choose your 
way !" border="0" /></ax/div> 
<div cl ass="contenuhome">Parce que...</div> 
</div> 

<div cl ass="contenul ignehome"> 
<div cl ass="contenubande"xa href="labo.php"> 
<img src="images/home_l abo_automne.gi f " width="50px" 
height="42px" alt="Labo" ti tl e="Labo" border="0" /></ax/div> 
<div cl ass="contenuhome">Dans cet espace...</div> 
</div> 

<di v cl ass="contenul ignehome"> 
<div cl ass="contenubande"> 
<img src="images/home_portfol io_automne.gi f " width="50px" 
height="42px" alt="Portfol io" title="Portfol io" border="0" /> 
</div> 

<div cl ass="contenuhome">Vous pourrez...</div> 
</div> 

<di v cl ass="contenul ignehome"> 

<div cl ass="contenubande"xa href="webmaster.php"> 
<img src="images/home_webmaster_automne.gif" width="50px" 
height="42px" al t= "Webmaster" title="Webmaster" border="0" /> 
</ax/div> 

<div cl ass="contenuhome">Ici...</di v> 
</div> 

<div cl ass="contenul ignehome"> 
<div cl ass="contenubande"xa href="humeurs.php"> 
<img src="images/home_humeurs_automne.gif" width="50px" 
height="42px" alt="Humeurs" ti tl e="Humeurs" border="0" /> 

</ax/div> 

<div cl ass="contenuhome">Cette rubrique... </div> 
</di v> 

<div cl ass="contenul ignehome"> 
<div cl ass="contenubande"xa href="l iens .php"> 
<img src="images/home_l iens_automne.gi f " 
width="50px" height="42px" 

alt="Liens" title="Liens" border="0" /x/ax/div> 
<div cl ass="contenuhome">Une petite 1 i ste...</di v> 
</di v> 

<div cl ass="contenul ignehome"> 
<di v cl ass="contenubande"x/di v> 
<div cl ass="contenuhome"> 

<form met hod=" post" action="php/newsletter/val idemai 1 . php "> 
<label for="emai 1 ">Newsl etter : 
<input type="text" name="email" size="20px" /x/label> 
<input type=" submit" name="Submi t" val ue="S ' inscri re" /> 
</form> 
</div> 
</div> 
</div> 
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Les images de liens sont ici au milieu de la boite de colonne. Ici les 
images sont de vraies images et ne sont pas simplement des images de 
fond. Elles sont traitees par les navigateurs comme du texte et obeissent 
done a la commande text-align: center. La position est fiottante a 
gauche. 




< Figure 5.12 : 

Quelques boites 



Le conteneur qui contient toute cette partie a comme propriete height: 
100% qui lui permet de descendre jusqu'au bas de la page. 

.conteneurdescri ptionhome{ 
float: left; 

} 

.contenuhome{ 

margin-left: 95px; 
height: 100%; 
text-align: justify; 

} 

.contenul ignehome{ 

margin-bottom: 20px; 
width: 450px; 
float: left; 

} 

La boite de news fiotte, elle aussi, a gauche avec une marge de 40 pixels 
a gauche et de 20 pixels en bas. La hauteur est definie a 200 pixels et la 
propriete overflow arretee a auto permet a cette boite d'afficher un 
ascenseur des que le texte est trop grand (voir Figure 5.13). 

.conteneurnews{ 
width: 200px; 
height: 350px; 
overflow: auto; 
border: lpx solid #000000; 
float: left; 
margin: 0 0 20px 40px; 
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padding: 7px; 



Apres... hum.je n'ose mem« pas 
regarder la date de la news 
precedente,,. Disons... Apres pas 
mal de temps sans touchet au site, 
pour diverges raisons (stages, 
autres projets, grands voyages, 
etc) je vais essayer de me 
repencher dessus, D'ici peu je 
devrais uploader des photos de 
mon voyage en amerique latine 
(plus d'infos sur mon blog d'un 
Frantai* en Argentine i et tenter de 
vous proposer des motifs sympas 
pour T-shirt. 

Et qui sait, changer un peu ce 
design qui commence a dater ! 



•* Figure 5.13 

La boite de 
nouvelles 



Ajoutd'une rubrique photo dans I 
page lab©, maintenant que j'ai un 
numerique je peu:-: me faire plaisi 

II va falloir que je pense a revoir 
taille des vignettes, la ca fait 
moche. Et un fond plus neutre po 



La boite en bas, avec le style et la propriete clear: both, ajoute un 
espace apres chaque news. 

<di v cl ass="conteneurnews"xdi v cl ass="ti t renews ">News</di v> 
<di v cl ass="datenews">08-03-2005</di v> 
<div cl ass="textenews"xp>Apres... </px/div> 
<br /x/di v> 

<div style="clear: both;"x/div> 
</di v> 

Ce site est bien confu. Le graphiste a fait preuve d'une bonne anticipation 
des besoins futurs du site et montre un reel souci de communiquer. 

Clair et corporate 

Le site gaesys.com est l'exemple type d'un site corporate (entreprise), 
avec son fond blanc, qui donne le meilleur contraste pour les differents 
textes ou liens qui parsement la page d'accueil. II est d'autant plus 
"corporate" qu'il est "B to B" (c'est-a-dire qu'il s'adresse a d'autres 
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entreprises). Le logo lui-meme reflete parfaitement la philosophic de cette 
societe, qui propose de la communication a d'autres societes et les outils 
web qui en sont les vecteurs. 



Fichler Edition Affichage Aller a Marque-pages ouols ? 



3* Gaesys 



.. Plan du site ' Contact © Aide » Se connecter 
[Tapezvotre recherche... ~| 4, rechercher 



AAA.' 



Des services orientes qualite 



Gaesys realise votre site internet, intranet et extranet, qui 

constituent le coeur de votre communication d'entreprise. Ses 
services repondent a vos besoins actuels et se preparent a 
votre evolution en exploitant les fortes potentiates du web 
standard. 



Gaesys se veut partenaire de revolution efficace de votre strategie 
informatique, en vous aidant a integrer les standards ouverts et les logiciels 
libres dans votre propre systeme informatique. 



Les sites internet 



f 



Un hahli.-rKir P-d.:-;:^ 3 ve:re n-:3i:ir 
Uno ooot ■: ' r:; :i roo ■■■ :<l: : to 
Uno o-- : lut o" i"g;: 100 '"'t Igotjoe 
Un partenanat constant 



Les intranets de Gestion 

[-'organisation de vos donnees 
Des solution:. 3 : I: oooms metiers 
L ntoo 1 3t - 00 : poxoBr 
Vos relations facilities. 



L'investissement durable 

Nous avons choisi 3 criteres qui participent a 
caracteriser un investissement durable en 
informatique. et qui constituent des elements a 
prendre en compte dans vos choix 
devolution... 



Opquast 1 .0 

Qualite 



Ce site integre le e ■■■ riyeaiji- do bonnes 
pratiques ^ d'Opquast 1.0. '?aesyo ot 
H'C dSt sont partenaires ^ pour leur 
promotion et leur utilisation. 



P 5 * Termine 



▲ Figure 5.14 : gaesys.com 



Les sites que gaesys.com propose de faire pour d'autres societes sont deja 
aux normes Opquast 1.0, XHTML 1.0 et CSS 3, et WCAG 1.0. Gaesys a 
d'autant plus a coeur de s'y conformer pour son propre site, qui est une 
vitrine de son travail (voir Figure 5.15). 
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Opquast 1.0 

Qua lite 

Ce site integre les 3 niveaux de bonnes pratiques '• 
d'Opquast 1.0. Gaesys et Opquast sont partenaires 
pour leur promotion et leur utilisation. 

XHTML 1 .0 et CSS 3 W5C 
Perennite """to** 

Les pages de ce site sont diffusees au format XHTML 
10 . les feuilles de styles au format CSS 3 II est ainsi 
lisibile dans tous les navigateurs actuels et futurs 




WCAG 1.0 

Accessibility 



WCAG 
AAA 



Ce site est accessible aux personnes deficientes 
visuelles, permet par exemple I'utilisation de navigateurs 
braille ou texte. est utilisable sans la souns. 



▲ Figure 5.15: Lesnormes 




La norme Opquast 

La norme Opquast propose une liste des 153 bonnes prati- 
ques (www.opquast.com/bonnes-pratiques/liste/), qui est un 
code de bonne conduite de la realisation de sites web concernant aussi 
bien la communication, le code, les conventions, le serveur, etc. 



La feuille de style commence par mettre les compteurs a 0, c'est-a-dire a 
remettre les marges internes et externes a 0. Ces marges sont creees par 
defaut sur certains navigateurs. 



/* RAZ pref browser */ 
* { 

margin: 0; 
padding: 0; 
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A l'instar du site precedent, le code est bien structure sur cette feuille de 
style, allant du general au particulier, agremente de commentaires et de 
claires separations entre chaque partie. 

Cette feuille s'occupe d'Internet Explorer, qui est le navigateur le plus 
repandu actuellement, mais qui obeit peu aux normes en vigueur. Le 
developpeur, ici, tient compte des differentes aberrations de ce navigateur 
en inserant des codes que seul Internet Explorer sera a meme de 
comprendre. 

Pour en savoir plus sur les aberrations d'Internet Explorer, 
consultez le chapitre La realisation du site. 



/* Base */ 
html { 

font-family: sans-serif; 
font-size: 80%; 

} 

body { 

padding-top: 0.6em; 

text-align: center; /* Compat IE5 */ 
background: IEBF4FD url ("/images/main_background. jpg") 
no-repeat fixed; 

} 

#structure { /* Compat IE5 */ 
width: 90%; 
max-width: 960px; 
text-align: left; 
margin-left: auto; 
margin-right: auto; 

} 

La boite de structure est a l'interieur de body et en epouse exactement ses 
limites. Cette boite contient les boites de classe header et body. Elle 
comble les failles d'Internet Explorer, comme le commentaire l'explique. 
Internet Explorer applique text-al i gn aux boites et aux textes qui y sont 
contenus, tout en refusant margin: auto. Ici le developpeur commence 
par positionner la boite au centre pour Internet Explorer, dans le selecteur 
body avec text-align: center, puis rectifie avec margin: auto et 
text-align: left dans le selecteur structure, qui sert de double a la 
balise body. Notez que max-wi dth ne s'appliquera pas a Internet Explorer. 
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La page est done constitute d'une en-tete, d'un pied de page et d'un 
cartouche blanc delimitant le contenu. 

L' en-tete regroupe un menu principal et un formulaire de recherche. 



Igestion input[type="submit"] , Igestion .submit { 
background: #dle2f3 url ("/images/icons/search. png") 

no-repeat 2px center; 
padding-left: 18px; 



■ Plan du site Contact ©Aide m Se connecter 




[lapez votre recherche! 



rechercher 



▲ Figure 5.16 : Petit menu 



L'image de fond est une loupe qui represente la fonction de recherche. 



<div cl ass="modul e" id="gestion"> 
<ul class="menu" id="menul"> 
<li id="sitemap"> 

<a href="/sitemap" title="Acceder a la page Plan du site" 
accesskey="3">Pl an du site</a> 
</11> 

<li id="contact"> 

<a href="/messages/" title="Acceder a la page Contact" 
accesskey= "6">Contact</a> 
</li> 

<li id="help"> 

<a href="/hel p/" title="Acceder a la page Aide" accesskey="0"> 

Ai de</a> 

</li> 

<1 i i d= " 1 ogi n "> 

<a href="/private/" title="Acceder a la page Se connecter" 

accesskey="5">Se connecter</a> 

</li> 

</ul> 

<form action="/research" method="get"> 
<fieldset> 

<label for="search">Rechercher sur ce site</label> 
<input accesskey="4" type="text" name="searchstring" 
value="Tapez votre recherche..." size="30" id="search" /> 
<input cl ass="submi t" type="submit" val ue="rechercher" /> 
</fieldset> 
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</form> 
</di v> 

Le site propose aux internautes des touches d'acces pour acceder aux liens 
par un clavier. La propriete accesskey peut s'inserer dans les balises a ou 
input d'un formulaire. Le visiteur peut alors appuyer sur Fune des 
touches en question pour acceder a la page derriere le lien ou a la fonction 
representee par le formulaire. Les differentes modalites sont expliquees 
dans l'aide et facilitent Faeces du site aux personnes qui naviguent sur 
Internet avec des navigateurs audio. 



nd*B EdOon Alfchage Mb* Ha >, . >r Outto \ 


^ — . Piandusite Contact najtfa mSscoflnacw 
*0 Q 6 O y 5 Tape; voire recherche rocharchm 






AmwHAtdi • la navigation a? «V a> 1 +* 

Aide a la navigation et regies cfaccessibilrte 




«n de facieter voire iwgeeon sur now sue, Vows (rouverei ici tome les pTrprmatioris 
nacessaras d ruMsaaon de ce sit* et au* moass 0« navigation aftemaats 




Race our cis clavier 




Las pages "genenques" du site sort accessibtos via das raccourcis nurnenque (uftbsaz 
m* ♦ mm • towene numenawe ou «. • foucne numtnqi/9 wus mreJom et bra* et • 
toucne numa/iijua ou »— • louefte numeoqu* sous Mac Os ) 




ToucheO Page d"ade (ce» page) 
Touche t Accesaumenu 
Touch* 2 Acces au contenu 
Touche A Plan du site 
Touched Recherchei 
Touche 5 : Sa comedar 
Touches Nous Contactor 
Touch* 9 Accuail 




Utilisation du menu au clavier 




Uttftsaz la combinaison de touch.? permeaant cTacceder au menu "Voire ratson de visiter 
Gaasys" («. * »). a raid* oas dachas du nam at oas. chotossez vova destination, pus 

taper m pus mi ahn de vafcdef vooe chax 




rntrnsm 









a Figure 5.17 : Aide 



L'en-tete a un fond transparent et une image de fond en bas de sa boite. 
Cette image de fond sert de bordure au cartouche situe dessous et lui 
fournit une bordure a angles ronds. 
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Iheader { 

background: transparent url ("/images/topround.png") 
no-repeat right bottom; 

} 

Iheader .hr { 

padding-top: lem important; 
background: transparent url ("/images/topround.png") 
no-repeat left bottom; 
} 

Les angles ronds sont obtenus par la balise header et par une classe hr a 
l'interieur de cette balise. La propriete padding-top accorde un peu 
d'espace entre le formulaire dans l'en-tete et le cartouche de contenu. 



^Gaesys 

. Plan du site Contact f. Aide • Se connecter 
[Tapez votre recherche ... | rechercher 

] Accueil J*JPM>iJ4 I 



A Figure 5.18 : Et ronds et ronds... 

Le cartouche blanc a angles ronds est pose sur un fond bleu et blanc dont 
le haut figure des touches de clavier. Le motif d'arriere-plan descend 
lorsque le visiteur utilise l'ascenseur, grace a la valeur f i xed mise dans le 
selecteur body. Les couleurs employees sont celles de Windows XP par 
defaut, ce qui est remarquable. C'est le meme bleu que l'ascenseur, par 
defaut. 



▲ Figure 5.19: L'image defond 
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On dirait que l'entreprise cherche a se fondre, a se faire discrete pour etre 
d'autant mieux au service du client. 

#body { 

background: white; 
border-left: lpx solid #b4c2cc; 
border-right: lpx solid #b4c2cc; 
clear: both; 

} 

#body hr { 

clear: both; 

border: lpx solid white; 
width: 95%; 

margin: Opx limportant; 
margin-left: 1% limportant; 

} 

Ifooter { 

padding-bottom: lOpx; 
margin-top: -lpx; 
font-size: 0.9em; 
color: #025; 
clear: both; 

background: transparent url ("/images/bottomround.png") 
no-repeat right top; 
} 

Ifooter .hr { 
height: 8px; 

background: transparent url ("/images/bottomround.png") 
no-repeat left top; 
margin-bottom: lem; 

} 

.hr { 

width: 40%; 
clear: both; 

} 

L'image des coins ronds est posee par paires. Le cartouche est concu pour 
faire au maximum 960 pixels. Par consequent, les images de bordure 
superieure et de bordure inferieure font au maximum 960 pixels. Elles 
sont formees de la ligne de bordure et des deux angles ronds de chaque 
cote, pour rejoindre les bordures droite et gauche qui, elles, sont des 
creations CSS. Pourquoi inserer deux images a chaque bordure horizon- 
tale ? Tout simplement pour prevoir le cas ou le cartouche, qui fait 90 % 
du tout, serait plus petit et ou Tangle de l'extremite serait cache. Les deux 
images forment une sorte d'image telescopique. Comme on peut le 
constater, dans le cartouche header, l'image est placee en bas a droite, 
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puis dans la classe hr de header, l'image est placee en bas a gauche. II 
en est de meme pour le cartouche footer, bati exactement de la meme 
facon, excepte que les images sont en haut de la boite. 

Le cartouche est forme de plusieurs parties : en haut a gauche, l'arbores- 
cence de la page courante, et un formulaire a droite, qui permet 
d'imprimer la page ou d'en modifier les polices. Le corps de la page 
lui-meme est forme d'une boite qui couvre toute la largeur du cartouche. 
A la fin de cette boite apparait la classe hr, qui permet de repousser les 
boites a droite et a gauche avec la propriete clear. 



En dessous, une boite est affichee, contenant deux boites cote a cote, puis 
deux boites flottantes (l'une a gauche, l'autre a droite). Enfin, une boite 
couvre la derniere partie sur toute la largeur. La boite de classe hr est 
savamment distribute sur la page pour que tout s'ordonne. Quelques 
parties sont soulignees d'une couleur claire qui accroche le regard au 
premier examen de la page. Ce sont les boites contenant F editorial et celle 
qui mene vers les realisations de sites web deja abouties. 

<div cl ass="resumes"> 
<div> 

<h2>Les sites i nternet</h2> 

<a href="/prestations/internet" title="l_es sites internet"> 
<img src="/irrages/icons/internet.png" alt="Les sites internet" 
height="70" width="70" /></a> 
<ul> 

<1 ixa href ="/pres tat ions/i nternet#habi " 
title="Un habillage adapte a votre image">Un habillage 
adapte a votre image</ax/l i> 

<lixa href="/prestations/internet#gest" title="Une gestion 
integree de votre site"> 
Une gestion integree de votre site</ax/li> 
<1 ixa href="/p>"estations/internet#evol " 
title="Une evolution rapide et adaptee"> 
Une evolution rapide et adaptee</ax/l i> 
<1 ixa href="/P r estations/internet#part" 
title="Un partenariat constant"> 
Un partenariat constant</ax/l i> 




< Figure 5.20 : 



Petit menu a droite 
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</ulx/div> 
<div> 

<h2>Les intranets de Gestion</h2> 
<a href ="/prestati ons/i ntranet " 
title="Les intranets de Gestion"> 
<img src="/i ma 9 es /i cons/i ntranet .png" 
alt="tes intranets de Gestion" hei ght="70" 
width="70" /></a> 
<ul> 

<1 ixa href="/P | "estations/intranet#orga" 
title="L'organisation de vos donnees"> 
L' organisation de vos 
donnees</ax/l i> 
<1 ixa href ="/P r estati ons/i nt ranetlsol u" 
title="Des solutions a vos besoins metiers"> 
Des solutions a vos besoins metiers</ax/l i> 
<1 ixa href ="/prest at i ons/i ntranetli nte" 
ti tl e="t' i ntegration de vos processus">t' i ntegration 
de vos processus</ax/l i> 
<1 ixa href ="/P | "est at i ons/i ntranetlrel a" 

title="Vos relations faci 1 i tees . ">Vos relations faci 1 i tees</a> 

</l ix/ul> 

</div> 

</div> 



•* Figure 5.21 : 

Les sites internet La boite de 

Un habillage adapte & votre image gauche 
Une gestion inteqree de votre site 
^B^r Une evolution rapide et adaptee 
Un partenanat constant 



Ici les deux boites sont simplement posees cote a cote sans aucune forme, 
ni intervention de style quelconque. Ensuite intervient la boite nominee 
hr, qui fait le vide de chaque cote et separe les deux boites, fiottant a 
gauche et a droite, qui suivent. 



Les intranets de Gestion 






L'organisation de vos donnees 


Des solutions a vos besoins metiers 


L'integration devos processus 


Vos relations facilitees. 



< Figure 5.22 

La boite de 
droite 



<div cl ass="hr"x/di v> 
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La boite gauche contient elle-meme plusieurs boites. Le conteneur hr 
evite que des boites ne viennent se glisser sur le cote et ajoute aussi un 
espace de separation. 

<div cl ass="l eft"> 

<div class="hsection" id="edito"> 

<h2>L 'investi ssement durabl e</h2> 

<p>Nous avons choisi_ </p> 
<a class="more" href="durabl e/" 
titl e=" L 1 1 nvesti ssement durabl e"> 
En savoir plus sur 1 1 investi ssement durable</a> 

</div> 

<div class="hsection" id="introenga"> 

<h2>Notre engagement</h2> 

<p>Lorsque nous...</p> 
<a class="more" href="engagement/" title="Notre engagements 
En savoir plus sur notre engagement</a> 
<div cl ass="hr"x/di v> 
</div> 

<div cl ass="real "> 

<pxa href ="/real i sations/" 

title="Nos realisations, problematiques et solutions'^ 

Nos derniers projets real i ses</a>, 

sites internet, boutiques, et intranet. </p> 

</div> 

</div> 

La boite droite affiche les normes. Elles sont affichees a cet endroit car 
elles represented une information secondaire par rapport a l'information 
plus importante sur la partie gauche. Les images affichees sont des images 
de fond dans des boites qui ont une classe et une identification. La classe 
permet de caracteriser toutes les boites apparentees tandis que l'identifi- 
cation permet de les individualiser. Le principe ici est simple : l'image de 
fond est placee en haut a droite et les titres ont un paddi ng-ri ght un peu 
plus grand que la largeur de l'image, c'est-a-dire que le titre va se placer 
a gauche de l'image, a 90 pixels du bord. 



Opquast 1 .0 

Qualite 



# 



Ce site integre les 3 niveaux de bonnes pratiques 
d'Opquast 10. Gaesvs et Opquast sont partenaires 
pour leur promotion et leur utilisation. 



< Figure 5.23 

La boite 
Opquast 
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<div id="engagement"> 

<div class="bzone"x/div> 

<div class="zone" id="opquast"> 
<div cl ass="ti tl e"> 
Opquast 1.0 

<div>Qual ite</di v> 
</div> 

<p>Ce site integre 
<a href =" http://opquast.com/decl arati ons/?si te=705" ti tl e= "..."> 
les 3 niveaux de bonnes pratiques</a> d'Opquast 1.0. 
<a href=" http://www.opquast.com/partenai res/" 
title="les partenaires du projet Opquast">Gaesys et Opquast 
sont partenai res</a> pour leur promotion et leur utilisation. 
</p> </div> 

<div class="zone" id="w3c"> 

<div class="title"> 

<acronym title="eXtanced Hypertext Markup Language"> 
XHTML</acronym> 

1.0 et ocronym title="Cascading Style Sheet">CSS</acronym> 3 

<div> 

Perenni te 

</div> 
</div> 
<P> 

Les pages de ce site sont dif fusees au <a href= 

"http://validator.w3.org/check7uri =http: //www. gaesys.com/" 
title="Site valide XHTML 1.0">format ocronym title= 

"eXtensed Hypertext Markup Language">XHTML</acronym> 1.0</a>, 
les feuilles de styles au <a href= 

http://... title="Site valide CSS3">format 
ocronym title="Cascading Style Sheet">CSS</acronym> 3</a>. 
II est ainsi lisible 

dans tous les navigateurs actuels et futurs. 

</P> 
</div> 

<div class="zone" id="wcag"> 
<div class="title"> 
WCAG 1.0 
<div> 

Accessi bi 1 i te 
</div> 
</div> 
<P> 

Ce site est accessible... 

</P> 
</div> 
<div class="hr"x/div> 
</div> 

<div class="isection" id="avis"> 
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<p> 

<strong>Votre avis nous interesse !</strong>... 

</P> 
</di v> 

</div> 

<hr /> 
</di v> 

La balise acronym permet au navigateur d'afficher un drapeau qui deploie 
le libelle complet de l'acronyme au passage de la souris. Encore une fois, 
la balise nommee h r arrive a point pour fermer ces boites et ouvrir la voie 
a la derniere boite du cartouche, nommee avis. 

lopquast { 

background: #ebf4fd url ("/images/opquast.png") 
no-repeat right top; 

} 

#w3c { 

background: #ebf4fd url ("/images/w3c.png") 
no-repeat top right; 

} 

#wcag { 

background: #ebf4fd url ("/irrages/wcag.png") 
no-repeat top right; 

} 

lengagement .title div { 
float: none; 
font-size: 0.9em; 
font-style: italic; 
color: #4477AA; 

} 

lengagement { 
float: right; 
width: 45%; 

background-image: none; 

} 

#engagement2 .title div { 
font-size: 0.9em; 
font-style: italic; 
color: #4477AA; 

} 

.left2 { 

width: 54%; 
float: left; 

} 

#engagement2 { 
width: 45%; 
float: right; 

background: transparent url ("/inmges/charte.png") 
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no-repeat top left; 

} 

engagement .zone { 

background-color: #ebf4fd; 

} 

#engagement2 .zone { 
margin: 0 ! important; 
padding: 0 [important; 

} 

#engagement2 .zone .title { 
font-family: Tahoma; 
font-size: 18pt; 
text-align: right; 
color: #112233; 
height: 60px; 
margin: 0; 
padding: 0; 
padding-right: 90px; 
padding-top: lOpx; 

} 

#engagement2 .zone .title div { 
padding-left: lem; 
font-size: 12pt; 

} 

#engagement2 .zone p { 
margin: 0 [important; 
padding: 0; 
padding-top: 5px; 
height: 65px; 

} 

lengagement .zone .title { 

background: transparent url ("/images/topleftblue.png") 
no-repeat top left; 

font-size: 1.3em; 

padding-right: 90px; 

text-align: right; 

color: #003366; 

padding-top: 0.6em; 

} 

lengagement .zone .title div { 
padding-left: lem; 
padding-bottom: 0.6em; 

background: transparent url ("/images/leftblue.png") 
no-repeat bottom left; 

} 

lengagement .zone p { 
background: IFFFFFF; 
padding-top: 0.6em [important; 
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Le point remarquable dans la construction des styles de la page est que la 
distribution est coherente entre les dimensions relatives aux images (et a 
tout ce qui s'y rattache), qui sont formulees en pixels, et celles des autres 
boites, qui sont en em, c'est-a-dire en une dimension relative. 



Rdier Edition Affchage -Her 3 Marque-p.sgee Outl:-:. £ 

--^ _ . Plan du site Contact iiAide ■ Se connecter 



Gaesys 



Tapez Yotre recherche... 4. rechercher 

Accuell a .* - 



Des services orientes qualite 



Gaesys realise votre site internet, intranet et extranet. 

qui constituent le coeur de votre communication 
d'entreprise. Ses services repondent a vos besoins 
actuels et se prep a rent a votre evolution en exploitant 
les fortes potentiates du web standard. 



Gaesys se veut partenaire de revolution efficace de votre strategic 
informatique. en vous aidant a integrer les standards ouverts et les 
logiciels libres dans votre propre systeme informatique. 



Les sites internet 

image 

^^^^ Une qestion inteqree de votre 

— — site 

M\e ■■■iTili.Jti ■:■!': r^::-n:le e\ a-:i~:rAee 
Un partenariat constant 



Les intranets de Gestion 

I L'orqanisation de vos donnees 
Des solutions a vos besoins 
TietierE. 

L'inteqration de vos processus 



L'investissement durable 

Nous avons choisi 3 criteres qui 
partici pent a caracten ser un 
investissement durable en informatique, et 
qui constituent des elements a prendre en 
compte dans vos choix devolution ... 



Opquast 1 .0 

Qua I if 



Ce site integre les 3 niveaux de 
bonnes pratiques d'Opquast 1 .0 
C-aesy;. et Opquast 5ont partenaires 
pour leur promotion et leur utilisation 



En savo ir plus surHnvestrssement durable XHTML 1 .0 et CSS 3 W5C 

2 PA»nnito M* 



▲ Figure 5.24 : Reduction de tattle 1 



Ainsi, la reduction de la resolution de Fecran ou de la taille de la fenetre 
du navigateur ne defait pas cette savante architecture, qui est remarqua- 
blement elastique. L'agrandissement des caracteres dans un navigateur ne 
nuit pas, non plus, a l'harmonie ou a la lisibilite de l'ensemble. 
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After gdoon sffchojc Uai Barque-pages Cutis £ 



Les sites internet 



Les intranets de 



•:ll> 

53 kali 



' UMfrrtuBonrafttt LVteofaPondevra 
; UnnartflfMtiacanstant Vl -,.-. „-.i^,- iri - r v.nr,----: 



L'lnvestlssement 
durable 

Nous avorrs choisi 3 
crueres ql» perticipent a 
caraclonsor un 
invOTOsswnsrt durable 
en rrfcumatique. el qui 
HMntiM dM m BU M 
a prendre en compte 
dam vos cholx 
d'evoMion 

En sawai rtis sur 

Notre engagement 

Lorsque nous r*sttont 
votre site internet ou 
intranet, nous nous 
engageom a respecter 
un ensemble de 
reconwandatons 
devetoppees per des 
organismes competents 
etrtconnus 



Opquast 

1.0 ~ 

Qua lite 

Ce site integre tes 3 
DfefiflU > 

• • : - • 

10 Gaesys ej 

Qoamt tsa 

" pout tour 



et CSS 3 

Pewnnrf* 

Les pages de ce site 

sont (Musses ai 
(ormat /HTML IQv 
tWlM IM M l%*M H 
f'-™* 11 «t 

sins isitxte dans tous 
In mlgMMpji Ktunj 
et fuxrs 



-i Figure 5.25 : 

Reduction de 
faille 2 




important 

La valeur [important permet au developpeur de rendre une 
propriete prioritaire sur la feuille de style par defaut du navigateur 
et sur celle de I'utilisateur. Cette propriete a priorite sur tout, excepte sur 
une propriete qui serait etiquetee ! important dans une feuille de style 
de I'utilisateur. 



5.2 Atelier d'artiste 

Mikael Helleux est photographe. Son site http://etc.photo.free.fr/ 
lui permet d'exposer ses ceuvres. Ses pages sont suffisamment sobres pour 
mettre en valeur ses photos, qu'elles soient en couleur ou en noir et blanc. 
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▲ Figure 5.26 : Arrivez 



La premiere page du site commence par une astuce qui permet de 
transformer la photo du positif au negatif lorsque la souris passe sur le lien 
en legende. La photo represente la porte d'un phare. 

#i ndex_photo { 

di spl ay :block; 

width :448px; 

height:297px; 

border: lpx solid #808080; 

background: url (images/bazar/phare_nega. jpg) 
no-repeat 50% 0%; 
} 

#index_photo img { 

filter: alpha (opacity=l) ; 
-moz-opaci ty :0. 1 ; 

} 

L'auteur a utilise une boite avec une image de fond dans laquelle il a 
insere une photo. L'image de fond est en negatif et l'image de "surface" 
est en positif, toutes les deux en noir et blanc. Pour que l'image de fond 
apparaisse, la photo de surface est affectee d'une transparence (voir 
Figure 5.27). 

II s'agit d'une propriete CSS3, ce qui oblige l'auteur a adjoindre du code 
JavaScript. Le JavaScript permet, au passage de la souris sur le lien, de 
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modifier l'opacite de la photo de surface, qui devient transparente, et de 
reveler ainsi la photo de fond. 




▲ Figure 5.27 : Entrez 



La propriete f i 1 ter appelle des effets. Paradoxalement, ils sont acceptes 
par Internet Explorer 6, mais pas par Firefox 1.5. 

Le filtre alpha utilise ici a une transparence maximale, attribuee avec 
opacity=l. 

5.3 Un site federateur 

Le site www.fleurs-livraison.info propose au visiteur des offres de 
plusieurs sites de fleurs sur Internet et de prestataires de livraison, avec un 
large eventail de bouquets ou de budgets. II fait office d'intermediaire 
entre les sites de livraison de fleurs et l'acheteur (voir Figure 5.28). 

La ligne graphique est claire et la feuille de style bien ordonnee et 
intelligente. 
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Fichier Edition Aflichage Allera Marque-pages Outils ? 
■ .p - - ^ http ffwwv, fleuri-livr-asori.infc'/ 




Les bouquets 



Q Coups de coeur 
Q Les meilteures 
ventes 

Tous les bouquets 



Boiili(|iie 
Toutes 



Un bouquet au hasardparmi 280 autres 



Bel aiv 3o€ 

Livraison possible par Florajet 

Tout en douceur et teridresse, ce bouquet parfume est adapts a tous les 
evenements heureu* que nous offre la vie. Bouquet rorid compose de 
gypsophile, de roses 30cm, germinis roses et lys blancs Feuillage : salal, 
pittcsporurn et fougere (tons : rose et blancs) Diametre du produit presents : 35 
cm environ (a tit re indicatit) 

Ecoiiomisez 4.5 * sur radial de ce pioduit en saisiss.ini le code tie 
i» FLEURSLIVRAISON Ion dn rtcapltulatif de volie commando. 





Les fleuristes 



Aquarelle 

Au nom de la rose 

Bebloom 

Florajet 

Interflora 



Offrir des fleurs c'est faire plaisirtout en se faisant plaisir soi 
meme Anniversaires. sentiments, remerciements, 

celebrations, manages, felicitations, convalescence ... De 
nombreuses occasions sont pretextes a ce plaisir de tous les 

sens. 

En plus de mettre a votre disposition un comparateur de prix 
efficace, nous avons teste et compare pour vous chaque 
fleuriste en ligne afin de vous garantir une livraison fleurs de 
qualite et sans mauvaises surprises De plus, en utilisant 
ces services, vous vous affranchirez des frontieres en ayant la 
possibility de faire livrer partout en France et a I'etranger a 
moindre prix : lei chaque budget trouve son bouquet. 

Vous pouvez des maintenant commencer la recherche d'un 
bouquet de fleurs via le formulaire "Recherche express" ou en 
visitant une des pages de la rubhque "Les bouquets". II vous 
est egalement possible de consulter les caracteristiques 
prapres a chaque fleuriste en ligne en consultant la rubrique 
"Les fleuristes". 



Nous vous souhaitons d'avance une 



cueillette i 



^ htp://www.fleurs-livraison.info/llvraison/fleurs_acheter_1029.asp 



▲ Figure 5.28 : Lapage d'accueil 



L'auteur fait d'abord table rase des reglages des navigateurs par defaut. 



body { 




margin:0; 




paddi ng:0; 




background:#fff ; 




font:lem Arial, Helvetica, sans- 


sen' f 


} 

body { 




text-al ign:center 




} 

/** Centrage de la page dans ie 


** i 
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Les marges sont remises a 0 et le centrage des blocs qui, sur Internet 
Explorer, se fait avec text-al ign, est assure. Ce centrage signifie que, un 
peu plus loin, il faudra rectifier et ajouter text-al ign: 1 eft, une fois que 
le centrage des blocs pour les navigateurs conformes aura ete indique. 

Imaster { 
margin:auto; 
text-al ign:l eft; 
width :800px; 

} 

Le conteneur master epouse le contenu de la balise corps et permet de 
rectifier le bidouillage (vu plus haut a propos d'Internet Explorer), 
text-align: center a permis de centrer le conteneur pour Internet 
Explorer, margin: auto le fait pour les autres navigateurs, puis 
text-al ign: 1 eft remet le texte a gauche pour Internet Explorer et les 
autres navigateurs. Cette maniere de faire complique le code et n'est pas 
conforme. Mais les developpeurs doivent tenir compte de la non- 
conformity de certains navigateurs. 

<body> 

<div id="master"> 

La strategic architecturale de la page est assez simple : 

■ un conteneur pour l'en-tete avec la banniere comme image de fond ; 

■ un conteneur pour la partie centrale ; 

- un conteneur pour la navigation ; 

- un conteneur pour le contenu propre a la page ; 

■ un conteneur pour le pied de page. 

Pour que les deux colonnes du contenu central, prises en sandwich entre 
l'en-tete et le pied, puissent se terminer proprement afin de faire place 
nette et de laisser de l'espace au pied de page, une balise br avec le nom 
cl ear comme classe est incluse a la fin de la deuxieme colonne. 

/** Utiles **/ 
.clear {clear:both;} 

Tous les conteneurs de gauche sont traces au cordeau car le motif de fond 
est un rectangle repete de haut en bas (repeat-y). Cette ligne a une 
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bordure laterale qui lui donne son apparence de relief. Le conteneur est 
coiffe d'une balise h2 avec, comme image de fond, le haut arrondi du 
cartouche, tandis que le bas est rempli d'une classe avec l'image de fond 
du bas du cartouche. 



Les bouquets 




En ce moment 




Coups de coeur 


B 


Les meilleures 




ventes 




Tous les bouquets 







< Figure 5.29 : 

Un conteneur de gauche 



<!-- Menu Les boutiques --> 
<div id="menu2"> 
<h2>Les f 1 euri stes</h2> 
<ul> 

<1 ixa href="l i vrai son/f 1 eurs_aquarel 1 e.asp" 
title="Livraison fleurs - Aquarel 1 e">Aquarel le</ax/l i> 
<1 ixa href="l i vrai son/f leurs_au_nom_de_l a_rose.asp" 
title="Livraison fleurs - Au nom de la rose">Au nom de la rose 
</ax/l i> 

<1 ixa href="l i vrai son/f 1 eurs_bebloom.asp" 
title="Livraison fleurs - Bebl oom">Bebloom</ax/l i> 
<1 ixa href="l i vrai son/f 1 eurs_f 1 orajet .asp" 
title="Livraison fleurs - Fl orajet">Fl orajet</ax/l i> 
<1 ixa href="l i vrai son/f 1 eurs_i nterf 1 ora.asp" 
title="Livraison fleurs - Interfl ora">Interf lora</ax/l i> 
<1 ixa href ="1 i vrai son/f 1 eurs_bouquet_nantai s.asp" 
title="Livraison fleurs - Le bouquet Nantais"> 
Le bouquet Nantai s</ax/l i> 
<1 ixa href="l i vrai son/pres_de_chez_vous .asp" 
title="Livraison fleurs - Pres de chez vous"> 
Pres de chez vous</ax/li> 
</ul> 

<span cl ass="menu2bottom"x/span> 
</di v> 

<!-- Fin colonne de gauche --> 
La feuille de style, elle, ajoute les images. 
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Figure 5.30 : 

La coiffe du cartouche "Les 
bouquets " 

Figure 5.31 : 

he corps du cartouche "Les 
bouquets " 

— ^ -4 Figure 5.32 : 

he pied du cartouche "Les 
bouquets " 

J** Menus **/ 

#menul {width: 190px; background: url (images/bg_menul.gif) 
repeat-y; margin-bottom: Opx} 

#menu2 {width: 190px; background: url (images/bg_menu2.gif) 
repeat-y;} 

Izonemenu h2 {padding:llpx lOpx 12px 10px;} 
#menul h2 {background: url (images/bgjnenul-top.gif) 
no-repeat; } 

#menu2 h2 {background: url (images/bg_menu2-top.gif) 
no-repeat; } 

Izonemenu ul , Izonemenu li {margin:0; padding:0; 
list-style: none;} 

#menul ul {width: 100%; background: #0099CC 

url (images/bg_menul.gif) 

repeat-y;} 

#menu2 ul {width: 100%; background: #0099CC 
url (images/bg_menu2.gif) 
repeat-y; } 

Izonemenu li {margin:0 4px 4px 4px;} 
#menul li {background:#65BBD2;} 
#menu2 li {background:#B6B6B6; } 

Izonemenu a {font-size:0.8em; color:#fff; display:block; 
padding:2px 4px 4px 34px; margin-top:-2px;} 
Imenul a {background: url (images/menul-puce.gif) no-repeat; 
font-weight: bold; color:#306376;} 

#menu2 a {background: url (images/menu2-puce.gif) no-repeat; 

color: #666666; font-weight: bold;} 

#menul a:hover {background: url (images/menul-puce.gif) 

no-repeat; font-weight: bold; color:#ffffff ;} 

#menu2 a:hover {background: url (images/menu2-puce.gif) 

no-repeat; color: #ffffff; font-weight: bold;} 
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.menulbottom, .menu2bottom {height: 15px; width: 190px; 
margin:0; display: block} 

.menulbottom {background: url (images/bgjnenul-bas.gif) 
no-repeat bottom;} 

.menu2bottom {background: url (images/bg_menu2-bas.gif) 
no-repeat bottom;} 



Les menus declinent comme puce un 
carre encadrant une fleche, qui est une 
image de fond, et comme couleur de 
fond la meme que celle du cartouche. 



□ 



•* Figure 5.33 

La fleche 



La balise 1 i a comme propriete di spl ay : bl ock. Ainsi, tout "survol" du 
conteneur 1 i provoque le changement de couleur du lien. Le paddi ng agit 
sur le retrait de la puce. 



Les bouquets 



En ce moment 
Coups de coeur 



b 



•* Figure 5.34 : 

Sur un "survol " 



Le formulaire de recherche est remarquable par son code XHTML et sa 
feuille de style. 

/** Formulaire de recherche **/ 
#frm-recherche { 
width: 190px; 

background: url (images/bg_recherche.gif) repeat-y; 
margin-bottom:Opx; 

} 

#frm-recherche h2 { 

background: url (images/bg_recherche-top.gi f ) no-repeat; 
font-size: lem; 
font-styl e:i tal i c; 
padding:llpx lOpx 12px lOpx; 

} 

#frm-recherche form { 
margin:0; 
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padding:0; 

I 

#f rm-recherche p { 
margin: 0 12px 
} 

#f rm-recherche label { 
font-size:0.9em; 

} 

#f rm-recherche input, #f rm-recherche select { 
margin:4px 0; 
wi dth: 150px; 

background -col or:#EEEDC4; 
border:0; 

border: lpx solid I948E1C; 

} 

#f rm-recherche .button { 
border: lpx solid leaeaea; 
margin-top:6px; 

} 

.frmrecherche-bottom { 

background: url (images/bg_recherche-bas.gif) no-repeat bottom; 

height: 15px; 

width:190px; 

margin:0; 

display:block 

} 

Le cartouche du formulaire de recherche est realise de la meme facon que 
les deux autres, avec le haut et le bas qui terminent la bordure avec des 
angles ronds. 

r | < Figure 5.35 : 

Le cartouche de recherche 



Volie budget l«t 



(Nont. ■ ■>(!/-(» n (••- . I 

Toutes « 

Rechercher 



A l'interieur du formulaire, les champs de texte ou du menu sont d'une 
couleur legerement plus claire que le fond background-col or:#EEEDC4 
et que le bouton de soumission du formulaire, qui contient la propriete 
input. 
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<!-- Formulaire de recherche --> 
<div id="frm-recherche"> 
<h2>Recherche express</h2> 

<form action=" fleurs_recherche_express.asp" method="get"> 
<pxlabel for="budget"> 

<span cl ass="Styl elO">Votre budget (€)</span> 

</labelx/p> 

<p class="StylelO"> 

<input name="budget" id="budget" type="text" tabindex="l" 
maxl ength="5"x/p> 
<p class="StylelO"> 

<label for="Facultatif"> Facultatif :<br> 

<em>(Nom, couleur, type...</em> ) </label> 
</p> 

<p class="StylelO"> 

<input autocompl ete="of f " name="facul tati f " id="facultatif" 
type="text" onkeyup="decl enche(thi s) ; " maxl ength="50"> 

</p> 

<p class="StylelO"> 

<div align="left" id="resultat" name="resul tat" cl ass="ajax"> 

</divx/p> 

<p cl ass="Styl e9"> 

<span cl ass="Styl elO"> 

<1 abel for=" bout i que ">Boutique</l abel> 

</span> 

<label for="boutique"x/label> 

</p> 

<p> <span cl ass="Styl e9"> 

<select name="bouti que" cl ass="sel ect" id="boutique"> 

<option value="0" selected> Toutes</option> 
<opti on val ue="l">Aquarel 1 e</option> 
<select> 
<P> 

<input class="button" type="submi t" name="Submit" 
val ue="Rechercher" i d="Submi t"> 

</p> 
</form> 

<span cl ass="frmrecherche-bottom"x/span> 
</div> 

La colonne de droite affiche le contenu de la page. Elle est realisee de la 
meme maniere que la colonne precedente avec trois conteneurs. Le 
troisieme conteneur integre une image a gauche, avec le texte aligne a 
droite et un paddi ng de 13 pixels ajoute a la largeur de l'image. 
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pa! 



ouquet cm hasard parmi 2H0 



Bel air 30? 

Livraison possible par Florajet 

Tout en douceur et tendresse, ce bouquet parfume est ^dapte a tous les 
evenements heureux que nous offre la vie. Bouquet rend compose de 
gypsophile, de roses 30cm, germinis roses et lys blancs. Feuillage : salal, 
pittosporum et fougere (tons : rose et blancs) Diametre du produit presente : 35 
cm environ (a titre indicatit) 

Econoniisez 4.5 * sui I'.i li-it ile ce pioiluit en s.iisiss.int le code tie 
■ eduction FLEURSLIVRAISON lois <lti lecopimUtif <le vntie coiuiiiaiiile. 

I Offrir des fleurs e'est faire plaisir tout en se faisant plaisir soi 

I meme Anniversaires, sentiments, remerciements, 

I celebrations, manages, felicitations, convalescence De 

I nombreuses occasions sont pretextes a ce plaisir de tous les 

^^h^^M^D sens 

^■^D* En Plus de mettre a votre disposition un comparateur de prix 
■■ efficace. nous avons teste et compare pour vous chaque 
. , fleuriste en ligne afin de vous garantir une livraison fleurs de 
qualite et sans mauvaises surprises De plus, en utilisant 
ces services, vous vous affranchirez des frontieres en ayant la 
possibility de faire livrer partout en France et a I'etranger a 
moindre prix : lei chaque budget trouve son bouquet 



Vous pouvez des mamtenant commencer la recherche d'un 
bouquet de fleurs via le formulaire "Recherche express" ou en 
visitant une des pages de la rubnque "Les bouquets". II vous 
est egalement possible de consulter les caracteristiques 
propres a chaque fleuriste en ligne en consultant la rubrique 
"Les fleunstes" 



Nous vous souhaitons d'avance une agreable cueillette I 



▲ Figure 5.36 : Lacolonne "de droite" 



.annoncespl p{padding-left: 146px} 



Le XHTML s'egrene selon le meme modele que precedemment. 

<div cl ass="annoncespl "> 

<span cl ass="annoncespl top"x/span> 

<img src="photo-accuei 1 .jpg" alt="Femme avec roses rouge"> 

<p>0ffrir des...<brxbr>En plus de...<brxbr> 
Vous pouvez...<brxbr>Nous vous souhaitons d 1 avance...<br> 

</pxspan cl ass = "annoncespl bas"x/span> 
</div> 
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Le pied de page se divise en deux parties horizontales. La premiere est 
dans un cartouche beige et la deuxieme est un texte en petits caracteres sur 
le fond blanc. 



[ 



Copyright © 2004-2006 E-Ware : 



< Figure 5.37 

le pied 



/** Pied **/ 
.piedtop { 
width:800px; 
height:8px; 
display:block; 

background: url (images/bg_pied-top.gif) no-repeat bottom; 
margi n-top:6px 

} 

#pied p. infos { 
font-size:0.75em; 
color:#fff; 
text-al ign:center; 

background: #00CC66 url (images/bg_pied.gif) repeat-y; 

} 

#pied .infos a {color:#fff ; } 

#pied p. 1 iensuti 1 es { 

color:#c0c0c0; 

width :800px; 

text-al ign :center; 

margin:0; 

paddi ng-top: 12px; 

font-size:0.75em; 

background: url (images/bg_pied-bas.gif) no-repeat left top; 
font-size: 9px; 

} 

#pied .liensutiles a { 
color:#c0c0c0; 
text-decoration:none; 
font-size: 9px; 

} 

L'image de fond est divisee en trois et distribute dans les trois conteneurs 
du pied de page : 

■ le haut du cartouche ; 

■ le corps du cartouche ; 

■ le bas du cartouche place en haut du dernier conteneur. 
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Fleurs-livraison est un joli site au service d'une bonne idee, a savoir 
regrouper toutes les offres de fleurs sur Internet, livraison comprise. 

5.4 Construction du site 

Auparavant, la seule maniere de construire une page etait de creer un 
tableau invisible avec des cellules dans lesquelles se positionnaient des 
images, des titres, des textes, des liens de navigation, le pied de page, le 
logo, la banniere de publicite. Le tableau est, en HTML, la seule balise 
permettant d'ordonner et de placer les elements. Le HTML est concu, au 
depart, pour afficher des textes avec des images qui sont prises comme des 
elements de texte et qui s'inserent la ou le code est place. La seule 
possibilite est d'aligner le texte sur l'image avec la propriete align. 
Celle-ci place le texte au bas, au milieu ou en haut de l'image, en prenant 
respectivement les valeurs bottom, middle et top. 

La conception des caiques (layers) revolutionne tout cela, avec Netscape 
le navigateur le plus utilise a l'epoque. Elle n'a jamais ete validee par le 
consortium W3C. Viennent ensuite les balises DIV promues par Microsoft 
sur son navigateur Internet Explorer. Ces containeurs ont ete valides. Sans 
CSS, ces boites sont disposees verticalement, les unes sur les autres, dans 
ce qu'on appelle le flux. 

Le flux est la lecture ligne a ligne operee par un navigateur quand il 
decode du HTML. Les premieres donnees affichees sont ecrites au debut 
du fichier source. Les boites ont ce privilege de suivre le flux courant ou 
d'en sortir (voir Figure 5.38). 

Le site classique est compose de trois colonnes, d'un en-tete et d'un pied, 
c'est-a-dire de cinq boites. II s'agit ici de disposer ces boites dans un 
ensemble harmonieux et regulier. Ces cinq boites sont materialisees par 
les conteneurs DIV. 
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Fichier Edition Affichage Ajera Marque-pages OuOs ? 



LE TITRE 


LIENS 


Le contenu Le contenu Le contenu Le contenu Le 


LIENS DROITS 


GAUCHES 


contenu Le contenu Le contenu Le contenu Le 


LIENS DROITS 


LIENS 


contenu Le contenu Le contenu Le contenu Le 


LIENS DROITS 


GAUCHES 


contenu Le contenu Le contenu Le contenu Le 


LIENS DROITS 


LIENS 


contenu Le contenu Le contenu Le contenu Le 




GAUCHES 


contenu Le contenu Le contenu Le contenu Le 




LIENS 


contenu Le contenu Le contenu Le contenu Le 




GAUCHES 


contenu Le contenu Le contenu Le contenu Le 




LIENS 


contenu Le contenu Le contenu Le contenu Le 




GAUCHES 


contenu Le contenu Le contenu Le contenu Le 




LIENS 


contenu Le contenu Le contenu Le contenu Le 




GAUCHES 
LIENS 


contenu Le contenu Le contenu Le contenu 




GAUCHES 






LIENS 






GAUCHES 







C'est le pied 

P» Termine 



a Figure 5.38: Site a cinq bottes 



Reflexions 

Avant de creer a proprement parler un site, il faut commencer par le 
dessiner, non pas sur support informatique, mais sur papier avec des 
crayons de couleur et affiner peu a peu le dessin. Ensuite, il est plus facile, 
une fois le dessin finalise, de le reporter sur un logiciel comme Photoshop, 
ou autre Fireworks. 

L'un des defauts des sites web est qu'ils sont traces au cordeau, comme 
des jardins a la francaise. Pour certains d'entre eux, ce n'est pas un 
defaut ; mais les angles droits, les lignes parfaites et les parties clairement 
delimitees ne conviennent pas systematiquement. 

Les webmasters s'ingenient a trouver des astuces, avec des images GIF a 
fond transparent ou des habillages de cartouche qui masquent le plan 
architectural de la page et cassent le bel ordonnancement. L'outil est au 
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service de la conception de la page. Disposer d'un bon outil, c'est bien. 
encore faut-il savoir ce que Ton peut en faire. 



^ CLUBCONTAX 



zeiss CONTAX 



')*U»*1 NO H. 



'. it .r i . loul hi' I* itU dii . ■ ■ ■ r r. d* U eonUi «t 

Vouv uourorax Id lout m qui Kt rMiiMi pour »t 
pimgtr «ofr» p>uton pour Tart « U ptoto id, p*t d* *zoa« 
-■(■■'■:■■(:■ v Jvi" Ml «1 p*l dt dub ftrmd I* port* Wt > 



P 5 * r^. 



▲ Figure 5.39: Un site avec decoupe 

Une fois le dessin realise, le webmaster le decoupe en code et en images. 
C'est la qu'il faut choisir le positionnement des colonnes et les imbrica- 
tions de conteneurs. 

Types de boTtes 

Les CSS proposent deux types de boites : 

■ les boites en ligne (inline) ; 

■ les boites bloc. 



Tab. 5.1 : Differences entes les boites bloc et les boTtes en ligne 


Caracteristiques des boites bloc 


Caracteristiques des boites en ligne 


Elles sont disposees naturellement les 
unes au-dessus des autres. 


Elles sont disposees naturellement les 
unes apres les autres. 
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Tab. 5.1 : Differences entes les boTtes bloc et les boTtes en ligne 


Caracteristiques des boites bloc 


Caracteristiques des boites en ligne 


Elles occupent toute la largeur du 
conteneur qui les contient. 


Elles entourent horizo ntalement leur 
contenu. 


Elles possedent quatre marges externes 
(haut, bas, gauche, droite). 


Elles possedent deux marges externes 
(gauche, droite). 


Elles sont insecables. 


Elles sont secables (pour aller a la ligne). 


Elles peuvent seulement contenir d'autres 
boTtes en ligne. 


Elles peuvent contenir tout type de boTte. 


II faut preciser la hauteur pour mettre de 
I'air autour du contenu. 


Elles permettent de definir la taille des 
marges interieures (padding). 


Elles prennent en charge span, em, a, 
img, br, i, strong. 


Elles prennent en charge div, body, p, 
table, span, a, blockquote, hl-h6, 
ol , ul, li, hr, img, form. 



La frontiere entre "en ligne" et "bloc" est poreuse 



Avec la propriete display: block ou display: inline, il est 
possible de forcer le type de la boTte ou de I'affirmer pour certains 
navigateurs peu respectueux des normes W3C. 



Position des boites 

La position par defaut, position: static;, est dans le flux normal. 
Positionner une boite signifie la sortir du flux naturel du HTML et la 
placer arbitrairement dans la page. La position peut etre calculee par 
rapport a la page web (absolute), par rapport aux autres boites (rela- 
tive) ou par rapport a l'ecran (fixed). 

absolute 

Quand une boite a une position absolue, sa place est definie par les 
proprietes top, 1 eft, right, bottom. Elles indiquent l'ecart entre la boite 
et le bord de la page web ou de V element qui la contient. 
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Lorem ipsum dolor sit amet. consectetuer adipiscing elit Praesent vrtae arcu id lorem mattis pulvinar. In 
hac habrtasse platea dictumst Cras eros lectus. consectetuer sit amet. consectetuer sed, lobortis quis. 
tellus. Suspendisse dictum- Morbi massa ipsum. pulvinar ut. porttitor eget. blandil eu. augue. Nam 
consequat Vestibulum ante ipsum phmis in faucibus orci luctus et uttrices posuere cubilia Curae; Nam ut 



podc 
Miqt 
ut loi 

eget 



Position 
Absolue 



. Nunc volutpat massa vol fclis. Integer non urna vol orci molostio tcmpus. 
ncidunt blandit, leo purus sagittis orci, a volutpat diam nunc sed neque. Cras 

lare. Fusee laoreet. Fusee vitae libera in magna cursus accumsan. Aenean 
■mate. 



In m : a sem In hac habitasse platea dictumst Morbi quis justo vitae est faucibus 

□ma ante sit amel lectus Quisque mollis lacus sed nisi Suspendisse potenti. 

Null* jada mauris in ornare consequat, magna velit molestie nisi, feugiat pharetra 

nisi lectus id augue. Fusee semper, metus id tincidunt tempus. risus mi eleifend sapien, non pulvinar 
dolor metus in orci. Sed pede tellus, gravida a, lobortis non, iaculis vitae, tellus. Etiam dignissim 
vestibulum nisi. Ut dignissim tellus sit amet sapien. Cras condimentum bibendum ipsum. Integer magna. 

Donee feugiat lacus quis nisi. Vestibulum aliquet velit in nisi. Sed sem. Etiam quam turpis, nonummy 
tempus. rhoncus eu. condimentum ut, felis. Mauris in tellus eget ipsum rhoncus porttrtor. Donee placerat. 
Pellentesque a magna. Sed vehicula iaculis mauris Quisque eget magna vitae sapien aliquam imperdiet. 
In aliquam hendrerit justo Aenean mi sem. sagittis ut, hendrerit sit amet, sollicitudin ut. mi Curabitur 
dolor orci, auctor vel, posuere ac, laoreet sit amet. arcu. Donee elit diam, interdum eu, varius quis, 
suscipit dignissim, erat. Quisque laoreet. Etiam leo. Vestibulum ut tellus sit amet dolor nonummy volutpat. 
Integer suscipit massa eu felis. Donee pulvinar augue sed justo. Donee tortor neque. mollis a. pulvinar et, 
dignissim vel, neque. Maecenas sed enim. 



Figure 5.40 : Position absolue 



div#navigauche { 
position: absolute; 
left: lOpx; 
top: 120px; 

} 



Cette boite sera positionnee a 120 pixels du bord superieur du site et a 
10 pixels du bord gauche, quelle que soit sa place dans le code HTML et 
quelle que soit la place des boites qui la contiennent. 



<div id= 


'fruit"> 




<p>Voi ci 


le conteneur 


exterieur</p> 


<div id= 


'noyau"> 




<p>Voi ci 


le conteneur 


interieur</p> 


</div> 






</div> 







Le code precedent affiche une boite contenue elle-meme dans une autre 
boite. Le code CSS va bousculer ce joli ordonnancement en sortant la 
boite noyau de sa place naturelle dans la boite fruit. 
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#fruit { 

background: #ACF; 
border: 2px solid #00F; 
height: 200px; 
margin: 50px; 

} 

#noyau { 

background: #FF0; 
border: 2px solid #800; 
height: lOOpx; 
margin: 30px; 

} 



Voici le conteneur exterieur 



Voici le conteneur 
interieur 



< Figure 5.41 : 

Fruit et noyau 1 



Maintenant l'exercice va consister a extraire le noyau du fruit, c'est-a-dire 
a sortir le conteneur interieur du conteneur exterieur avec la position 
absolute. La propriete padding evite que le texte soit colle au bord 
interne du conteneur. Le conteneur noyau est a 10 pixels du bord inferieur 
et a 10 pixels du bord droit. 

Ifruit { 

background: #ACF; 
border: 2px solid #00F; 
height: 200px; 
margin: 50px; 
padding: lOpx; 
} 

#noyau { 

position: absolute; 
bottom: lOpx; 
right: lOpx; 
background: #FF0; 
border: 2px solid #800; 
height: lOOpx; 
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margin: 30px; 
padding: lOpx; 



Voici le conteneur exterieur 



< Figure 5.42 : 

Fruit et noyau 2 



Voici le conteneur interieur 



Maintenant, le conteneur noyau mord sur le conteneur fruit avec une 
position absolue a 10 pixels du bord superieur et du bord gauche. 

(voir Figure 5.43) 
#fruit { 

background: #ACF; 
border: 2px solid #00F; 
height: 200px; 
margin: 50px; 
padding: lOpx; 
} 

#noyau { 

position: absolute; 
top: lOpx; 
left:10px; 
background: #FF0; 
border: 2px solid #800; 
height: lOOpx; 
margin: 30px; 
padding: lOpx; 
} 

La place du conteneur noyau n'est pas reservee et done le conteneur 
f rui t n'est pas ecarte et les deux conteneurs se retrouvent sur le meme 
emplacement. Le deuxieme conteneur, noyau, se retrouve au-dessus du 
conteneur fruit sans que le texte soit repousse dans la partie visible. 
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■* Figure 5.43 : 

Fruit et noyau 3 



Si le texte s'allonge et si la boite est dotee d'une hauteur precise, le texte 
debordera de la boite. Si la hauteur n'est pas precisee, a travers la 
propriete height, la boite va s'adapter a la longueur du texte. 




overflow 

La propriete overflow gere le comportement du texte par 
rapport a la boite qui le contient. Le comportement par defaut est 
visible : le texte deborde de la boite si celle-ci est trop petite. Avec la 
valeur hidden, le texte reste contenu dans les limites de la boite, mais 
aucun ascenseur ne permet de voir ce qui est cache. Avec scrol 1 , le 
texte est contenu dans les limites de la boite et est associe a une 
glissiere quelle que soit la taille du texte contenu. auto provoque 
^apparition de la glissiere seulement si la taille du texte le demande. 



relative 

La position relative ne se calcule plus par rapport a la page du site mais 
en fonction de la place que F element devrait occuper en etant dans le flux 
normal. Le flux normal dans l'exemple precedent place le noyau dans le 
fruit. Reprenons l'exemple precedent : 

#fruit { 

background: #ACF; 
border: 2px solid #00F; 
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height: 200px; 
margin: 50px; 
padding: lOpx; 

} 

#noyau { 

position: relative; 
top: lOpx; 
left:10px; 
background: #FF0; 
border: 2px solid #800; 
height: lOOpx; 
margin: 30px; 
padding: lOpx; 
} 



Voici le conteneur exterieur 



< Figure 5.44 : 

Fruit et noyau 4 



Voici le conteneur 
interieur 



Le conteneur noyau est en position relative par rapport au conteneur 
fruit, et non plus par rapport au bord de la page web. II se trouve done 
a 10 pixels du bord superieur et a 10 pixels du bord gauche de V element 
qui le contient. 

#fruit { 

background: #ACF; 
border: 2px solid #00F; 
height: 200px; 
margin: 50px; 
padding: lOpx; 
} 

#noyau { 

position: relative; 
bottom: lOpx; 
right: lOpx; 
background: #FF0; 
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border: 2px solid #800; 
height: lOOpx; 
margin: 30px; 
padding: lOpx; 



Voici le conteneur exterieur 



Voici le conteneur 
interieur 



•* Figure 5.45 : 

Fruit et noyau 5 



Comme precedemment, le texte pourra deborder si la hauteur specifiee est 
trap faible, ou le noyau s'agrandir au detriment du fruit, si le texte est 
long. Dans tous les cas, la marge exterieure (margin) et la marge 
interieure (padding) sont prises en compte. 

fixed 

Une boite de navigation transportant des liens de navigation peut avoir 
besoin, comme une palette fiottante dans de nombreux logiciels graphi- 
ques, d'etre a portee de clic de souris. 




•ox vo tad a*i p*.>aa a4*uUU t*WU fa 
r», awutw ***> —— J— aunt. *m a*t—> ii« lac 
twain. Ciwatac* panda lamav alll. Dun l*ar* u**n. aaVyncaMJ at. lanajamum ait, alvnal au. **• '#*d | 
at MM)M ft M j W "I'aon Pal am* fcmpdla — a »| 
fMH Imtui RpM (!•*«" MM <ampn« latin Pin* » 




W. M — I Mjfc MJ alK C«iMwl 
Ma aw> a>«H - tamaWi attt Umm al 
n piifw at "aann on paalu<w>( 



■tti«ia MM » Im«ui Mitail sUk> OM •»<«*• taciti iochkox ad Irtoia luaiM pa> 



I |Mi T««p*n lac IMMfR 



▲ Figure 5.46 : Boite en position fixee 
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Pour peu que la page soit tres haute, trois possibilities se presenters pour 
y avoir acces a partir du bas de la page : 

■ utiliser l'ascenseur ; 

■ disposer d'une ancre qui renvoie en haut de la page ; 

■ disposer d'une boite, qui, pour n'etre pas flottante, n'en est pas moins 
toujours rangee a la meme place sur l'ecran. 

Le resultat n'est pas performant graphiquement, mais il est pratique pour 
l'utilisateur, a condition que cette boite reste de dimension modeste. 



Sit amat, turpn lor am ipsum dolor tit amat, coroactatuar adipitcmg *4tt Mauris *g*t purut Dun vananatw anim kc t*m. 
In con val I it aufu* * wilt. Fine* *c ligula agat purut vahicula uilameorpar. Aanaan o< tarn non anta pul.imr viiwi. 
MMirit . * mm itt amat f tin lar man turn tamput. Prow nor orei ltd nut gravida vutputtta. Nutli facilni. Dun handrarit 
l«o non iw Mw'K mtuit, aicu itt amat impardial orntra, maurn n*ti intardum nunc. qun dictum dolor lacut tit amat 
loram Curabttur gi o . ida tamper alii. Dun libaro turpn. arfcpnctng at, faf man turn au, uttricai au, dum. Sad pot* rutrum 
odie. Maacanat vananam faucibut «tt. Aliquant arat voiutpat. Qunqua id lacut v*i iptum frtngMla nenummy. Prom 
agat tat matut tad doior. Nunc non arat. Maacanat pnaratra luctut lifula. EUam ornar* tamput lacut. Prow rutrum. Prow 
areu tor tor, todalat <augiat, putvinar in, farntantum a. dui. Intagor nunc mats*, gravida tit amat . pulvwar agat, ornar a 
ut, ml. Sutpanditta pul .mar t»pi«n vitaa taptan pi ac arat intardum. Phatallut val lacut. Cut abitur vita* nibh. Maacanat 
trntiqua. ma»a nac eon dim an turn pratium. -.apian orci faugiat maurn. non dignntim nni nibh ut arat. Nam iptum nibh. 
harvdrarlt quit, pal I ant as qua tad. intardum non, ipturn. lad impar diat con dim an turn loram. Prom quit anta. Aanaan 
pal I an tat qua, maurn val ultrtciat lobortn. naqua arat convalln niti. at tinodunt tatlu* maun*, au iptum. Prom at dolor 
non nunc accurman gravida. Cur abitur vqtutpat jutto cotwactatuar o*ci dKtum auctor. Donac turpn maurn. impardiat ut, 
lacxaal at, tod » I at at, matut, Vivamut adipitcing faugiat lao Dun alaitand comrnodo nnl. Maacanat at dui. Loram iptum 
dolor tit amat, ■ ■ ' - '■■>' - adipncmg -i >* Cur abitur turpn mi. laoraal non. vast ibul urn at. tampor tit amat. anim. 
VHtibulum ant* iptum primn in faucrbut orci luctut at ultfieat potuara cubiha Curaa: iad ut trie at eongua lacut. Cum 
(OClK natoqua panatibut at magnit dit par tu riant montat, natcatur ridtculut mot Ctas val quam. Protn ac pada m m Mir It 
trntiqua vivaria. In lauclbut Kan ck an I dolor. Clan apt ant baciti tocKnqu ad lilora torquant par conubia ncttia, par 
tncaptot hymanaaot, In au otei. Qunqua porttitor uilameorpar :»m, In eongua. Donac id tallut auctor arot todalat 
coniaquat. Intagar tamput lao handrarit anta. Aanaan non orci nac arat (acmia dapiout, Ptiaiallut ataifand tampor turpn. 
Nunc moUn purut at nibh. Vivamut vitaa nunc at cWor congua ahquat. Praatant ddor maun-., tampar m. vanut au. 
pratlum val. (actus. Praatant nncidunt. Ut urna niti. variirt at. malatuada agat. alamantum ut, valit. Pallantatqua ut 
quam. Donac contact a tuar Maacanat lao Nam to* tor. Nullam ac anim non sugua ultrrciat contaquat. Null am at magna. 
Curabitur nac vallt. Sutpanditta potanti. Dun augua. Nunc at naqua. Prom molln tapian non rrtut. Loram iptum dolor tit 
amat, contactatuar adipitcing aht. Donac laoraat anta tcatantqu* niti. Ut tirtcidunt. ntut nac phvatra Wandit. tallut 
liguta laoraat dolor, ut adquam ligula val it at nni. Maacanat arcu purut. ton dim an turn tmtiqua. luctut at, btbandum val, 
valit. Ut a urna au urna accumtan uitardum. Sad tcalaritqua jutbo tad lao. Maacanat quit junto id c-cao vafucuta votutoat. 



Qunqua rutrum purut at tapian. Nulla loram maurn. dignntim rhoncut. porttitor at, con dun ant 
mc-l«tti« dignntim arat. Sad a «(it m arat toUicitudin vanut. Etiam tapian ligula, uilameorpar v Voki lacontanaur intariaur 
tit amat, turpn . 



A Figure 5.47 : Mime boite, meme position dans le navigateur 

Une page a trois colonnes avec la position 
relative 

Pour faire une page en trois colonnes, le developpeur pose des boites sur 
la page. En fait, elle contient classiquement cinq boites : 

■ la boite d'en-tete qui s'etend sur toute la largeur de la page ; 

■ une colonne gauche avec les liens de navigation ; 

■ une colonne centrale qui contient le contenu de la page ; 
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■ une colonne droite qui comporte des liens mis en avant ou des 
mots-cles, ou encore des liens contextuels propres a la page ; 

■ une boite pour le pied de page, qui contient les credits du site, le lien 
de contact. 

Le code general du site Ecoute S'il Pleut peut etre schematise comme 
ceci : 

<div id="titre">LE TITRE </div> 
<div id="contenu"> 
<div id="navigauche"> 

LIENS GAUCHES<br \> ... </div> 
<div id="corps"> 
Le contenu... 

</di v> 

<div id="navidroite"> 
LIENS DR0ITS<br \> ... </div> 
</di v> 

<div i d="pi ed"> 
C ' EST LE PIED 

</div> 

Les conteneurs se suivent verticalement dans l'ordre indique par le code 
source. Pour qu'on puisse les distinguer sur la page, ils vont etre marques 
par un fond de couleur. Maintenant, les boites sont positionnees avec une 
position absolue. Elles mordent sur la boite titre. 

body { 

font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: lem; 

} 

div#titre { 

background-color: IBD4500; 

color: #FFF; 

border: 2px solid #000; 

} 

div#corps { 
top: 0; 

padding: 0 0 0 lOpx; 
position: relative; 
margin: 30px 250px; 
padding: 0 20px 20px 20px; 
background-color: IE2EA8A; 
border: 2px solid #000; 

} 

div#navigauche { 
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width: 200px; 
left: 0; 
top: 0; 

position: absolute; 
margin: 30px; 
padding: Opx; 
color: #FFF; 

background-color: #5078CF; 
border: 2px solid #000; 

} 

divlnavidroite { 
width: 200px; 

position: absolute; 

right: 0; 

top: 0; 

margin: 30px; 

padding: Opx; 

color: #FFF; 

background-color: IE36503; 
border: 2px solid #000; 

} 

divlpied { 
left: auto; 
bottom: 20px; 

background-color: I7FE600; 
border: 2px solid #000; 
} 



L LIENS GAUCHES 
LIENS GAUCHES 
- LIENS GAUCHES 



Lt cont«nu 
<ontenu L* 
L« conttnu 

mmIim La 

Lt conttnu 
conttnu Lt 
Lt conttnu 
conttnu Lt 
Lt conttnu 
conttnu Lt 
Lt conttnu 
conttnu Lt 
Lt conttnu 
conttnu Lt 



Lt conttnu 
conttnu Lt 
Lt conttnu 
conttnu Lt 
Lt conttnu 
conttnu Lt 
Lt conttnu 
conttnu Lt 
Lt conttnu 
conttnu Lt 
Le conttnu 
conttnu Lt 
Lt conttnu 
conttnu Lt 



Lt con! 
conttn 
Lt cool 
conttn 
Lt com 
conttn 
Lt coni 
conttn 
Lt com 
conttn 
Lt com 
conttnu Lt 
Le conttnu 
conttnu 



conttnu 
Lt 

conttnu 



LIENS DROITS 



▲ Figure 5.48 : Absolus et relatifs 
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MIENS GAUCHES 

■ lIENS GAUCHES 



C est le pied 



▲ Figure 5.49: Absolus et relatifs avec modification des dimensions du 
navigateur 

Pour la boite ti tre, il n'est pas necessaire de preciser la position puisque 
cette boite se place naturellement dans le flux, en haut de la page. Elle se 
distingue juste par sa couleur de fond. 

L'ensemble des trois colonnes est forme des deux colonnes de navigation, 
qui sont en position absolue de chaque cote de la page, et de la colonne 
centrale qui, elle, est en position relative. 
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margin et padding 

La propriete margin decrit les marges externes d'une boTte 
alors que padding decrit les marges internes. 
Les proprietes margi n et paddi ng peuvent etre suivies d'un tiret et d'une 
position (top : haut, bottom : bas, left : gauche, right : droite), comme 
margin-bottom: 0 ou padding-left: 20px. Les valeurs peuvent etre 
groupees sur une seule ligne comme ceci : 
margin: lOpx 20px 15px lOpx; 

■ quatre valeurs : haut, droite, bas, gauche ; 

■ deux valeurs : haut et bas, puis droite et gauche ; 

■ une valeur : partout. 



La colonne centrale est en position relative car elle se definit par rapport 
aux deux boites de navigation. Placer toutes les boites en position absolue 
est trop rigide et ne tient pas compte des differentes configurations des 
navigateurs. Par ailleurs, cela signifierait que le type d'affichage est defini 
de maniere autoritaire et que le site, s'il est normalise pour un affichage de 
800 x 600 pixels, est completement inadapte pour un affichage de 
1 280 x 1 024 pixels. La place des boites de navigation est toujours a 
gauche et a droite et elles peuvent done avoir une position absolue. Si la 
resolution de l'ecran change, les boites de navigation resteront identiques ; 
par contre, la colonne centrale avec la position relative s'adaptera a la 
nouvelle largeur. 

Si la marge n'est pas specifiee dans la colonne centrale, la colonne de 
gauche passera sous la colonne centrale qui occupera toute la largeur. La 
colonne de droite, elle, passera au-dessus de la centrale. Ainsi, une partie 
du texte ne pourra etre lue et les liens de navigation de la colonne de 
gauche ne seront pas accessibles. 




La dimension z 

Avec la propriete z-index, il est possible de faire passer une 
boTte au-dessus d'une autre. Pour cela, il suffit de doter la boTte 
d'un coefficient plus eleve pour qu'elle soit en haut de la pile. Le 
coefficient de z-index estO par defaut. 
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Pour que tout soit en place, il faut jouer sur la marge et sur le fait que les 
deux colonnes de navigation ont une largeur definie a 200 pixels. En 
mettant la marge horizontale a 250 pixels, le developpeur du site laisse la 
place a chaque colonne laterale et ajoute une gouttiere de 50 pixels. 

II subsiste un probleme : il faut descendre les colonnes. La marge de 
20 pixels n'est pas suffisante pour eviter de mordre sur la boite de titre. 
C'est la propriete top qui permettra de descendre ces blocs. Ainsi en 
s'accroissant, le bloc descendra. 

Apres la manipulation qui permet de descendre les blocs, il subsiste un 
probleme : ces deux blocs de navigation ne peuvent s'adapter a la hauteur 
de la boite ti tre. La solution consiste a detourner un peu les regies CSS 
en inserant les trois colonnes dans une autre boite, qui aura une position 
relative par rapport a la boite ti tre qui est au-dessus. Cette boite, appelee 
contenu, contient les blocs navi gauche, corps, navidroite. 

<div id="titre">LE TITRE </div> 

<div id="contenu"> 
<div id="navigauche"> 

LIENS GAUCHES<br \> 

LIENS GAUCHES<br \> 

LIENS GAUCHES<br \> 

LIENS GAUCHES<br \> 

</div> 
<div id=" corps "> 

Le contenu Le contenu Le contenu Le contenu Le contenu 
Le contenu Le contenu Le contenu Le contenu Le contenu 
Le contenu 
</div> 

<div id="navidroi te"> 
LIENS DR0ITS<br \> 
LIENS DR0ITS<br \> 
LIENS DR0ITS<br \> 
LIENS DR0ITS<br \> 

</div> 

</div> 

Dans les CSS, on ajoute les caracteristiques de la boite contenu. 

di v#contenu{ 
height: 600px; 

position: relative; 

border: 2px solid #000; 

} 
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Ici les proprietes top des deux colonnes sont reglees sur la meme valeur 
que la valeur de marge de la colonne du centre. 

Une page a trois colonnes avec la position 
flottante 

Apres avoir etudie une forme de site a trois colonnes, avec les deux 
colonnes de navigation en position absolue et la colonne centrale en 
position relative, il est interessant de se pencher sur un autre site a trois 
colonnes qui utilisent la position flottante (position: float;). Le site 
precedent obligeait a detourner le code CSS en utilisant une bidouille de 
conteneur, present uniquement pour la bonne presentation. Pour les 
colonnes flottantes, le code est plus orthodoxe. Le code XHTML est le 
meme, excepte que Ton enleve la boite contenu. 



<div id="titre"> 

<hl>LE TITRE</hl> 
</di v> 

<div id="navigauche"> 
<p> LIENS GAUCHES<br \>... 

</p> 
</div> 

<div id="navidroite"> 
<p> LIENS DR0ITS<br \> 
LIENS DR0ITS<br \>... 

</P> 
</div> 

<div id="crops"> 
<p> Le contenu... </p> 
</di v> 

<div id="pied"> 
<p>C'est le pied </p> 
</div> 

La taille du texte de la navigation gauche a ete allongee par rapport a la 
colonne de droite pour imiter une situation reelle. Le code CSS est le 
suivant : 



divltitre { 




text-align: center; 




background-color: #CCCCCC; 




height: 60px; 




margin: Opx; 
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padding: lpx; 

} 

divlnavi gauche { 
padding: lOpx; 
width: 130px; 
float: left; 
background-color: I9999FF; 

} 

div#corps { 
padding: lOpx; 
margin-left: 160px; 
margin-right: 160px; 

background-color: I5DC861; 

} 

divlnavi droite { 
padding: lOpx; 
width: 130px; 
float: right; 
background-color: IFFFF99; 

} 

divlpied { 
border-top: solid #000 lpx; 
background-color: ICCCCCC; 
padding: lOpx; 
text-align: center; 
clear: both; 
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▲ Figure 5.50 : Leresultat 
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La position flottante permet a un bloc de Hotter. C'est comme avec les 
images dans le HTML : le texte s'enroule naturellement autour. Le 
contenu aussi s'enroule autour de la boite flottante, qui peut etre a droite 
ou a gauche, comme les colonnes de navigation dans l'exemple, le bloc 
central s'inserant entre les deux, sans mordre sur les autres boites. 

Pour la boite pi ed, la propriete cl ear est utilisee. Cette propriete signifie 
au navigateur que de la place est liberee sur les cotes, a droite pour cl ear: 
right, a gauche pour clear: left et des deux cotes pour clear: both. 
Ainsi la boite pied libere de la place de chaque cote et n'est done pas 
collee a d'autres boites. La propriete de clear par defaut est none. 

Plusieurs problemes se posent, dont le titre qui mord un peu sur la limite 
avec Firefox. Cette anomalie n'en est pas vraiment une. En fait, le 
navigateur Firefox a une option pour afficher les caracteres en grand et le 
titre mord done sur le bord de la boite. Pour rectifier, il suffit d'ajouter 
10 pixels en hauteur. 

div#titre { 
text-align: center; 
background-color: #CCCCCC; 
height: 70px; 
margin: Opx; 
padding: lpx; 
■ 

Une faute de gout affiche les gouttieres en blanc entre les boites, ce qui 
tranche trop avec les couleurs d'arriere-plan des colonnes. Pour rectifier 
cela, le developpeur peut ajouter une couleur de fond a toute la page, ce 
qui modifiera la couleur des gouttieres. 

body { 

margin: Opx; 
padding: Opx; 

background-color: #69F; 

} 

Le defaut le plus evident est le fait que les couleurs d'arriere-plan ne font 
qu'envelopper les textes et ne descendent pas jusqu'au bas de la page. 
Pour pallier cela, il faut ajouter la propriete height: 100%; dans chaque 
boite. 
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div#navi gauche { 
padding: lOpx; 
width: 130px; 
float: left; 

background-color: I9999FF; 

height: 100%; 

} 

div#corps { 
padding: lOpx; 
margin-left: 160px; 
margin-right: 160px; 

background-color: #5DC861; 

height: 100%; 

} 

div#navidroite { 
padding: lOpx; 
width: 130px; 
float: right; 

background-color: IFFFF99; 

height: 100%; 

} 




▲ Figure 5.51 : Hauteur a 100% 



Pour resoudre ces problemes de positionnement et de compatibilite avec 
les navigateurs, le mieux est encore de faire un vrai site... 
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La construction du site Ecoute S'il Pleut 

Comme vu precedemment, le site Ecoute S'il Pleut (www . ardaee . com) est 
a trois colonnes. C'est le moment ou il faut prendre des options. Le choix 
va se porter sur un site qui est contenu dans un espace large de 770 pixels 
et qui est cependant assez souple pour permettre a l'utilisateur de modifier 
le format pour une meilleure lecture. Le choix se porte sur des boites 
flottantes plutot que des boites en position absolue, qui posent le probleme 
de lisibilite quand le visiteur modifie le format des polices utilisees. Dans 
ce cas, certaines boites peuvent en masquer d'autres et le site devient 
illisible. Cela arrive sur certains sites ou le corps de police est minuscule, 
mais ou il est possible de le modifier parce que la taille des polices n'est 
pas relative, ou lorsque les boites se telescopent et qu'une partie du texte 
est masquee. Cette erreur est redhibitoire, meme si le contenu est 
interessant : le visiteur quitte le site et ne reviendra plus. 




▲ Figure 5.52 : Ardaee.com 



Le site utilisera aussi des astuces pour casser le schema des boites 
rectangulaires alignees au cordeau, ce qui permettra de se confronter aux 
difficultes dues au fait qu'un certain nombre de navigateurs, Internet 
Explorer en particulier, ne respectent pas les recommandations du W3C en 
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matiere de feuilles de style. Un navigateur qui n' applique pas les feuilles 
de style ne pose pas de probleme car il affiche la page sans aucun style et 
celle-ci reste lisible. Par contre, un navigateur cense appliquer les feuilles 
de style, mais qui ne respecte pas les regies, est redoutable, d'autant plus 
s'il est largement utilise. II faudra done faire du bricolage peu orthodoxe 
pour que l'affichage soit convenable sur les navigateurs les plus courants. 

La page type du site presente un titre, une colonne gauche, un contenu, 
une colonne droite et une boite de pied de page. 

La construction commence par la creation d'un conteneur qui epouse les 
limites de la balise body. Ce conteneur renferme tous les autres conteneurs 
et facilite la disposition de l'ensemble. Sa largeur est de 770 pixels, 
correspondant a l'affichage d'un ecran a la resolution de 800x600px, 
moins les marges occupees par le navigateur (glissiere). 

Cette surface permet de maitriser les largeurs et surtout la distribution des 
boites et la disposition de l'ensemble. Cette boite porte ici l'identifiant 
contenu. Dans la feuille de style, les premiers selecteur et conteneur 
caracterises sont le selecteur body et le conteneur contenu. 

body { 

margin:0; 

paddi ng:0; 

background:#233A00; 

font:lem Verdana, Arial, Helvetica, sans-serif; 
text-align: center; 

} 

div#contenu { 
background :#ffffel; 
position: relative; 
max-width: 770px; 
margin: lOpx auto 0 auto; 
text-align: left; 
padding: 0; 
} 

Les marges interieure et exterieure sont remises a 0 pour effacer les 
reglages par defaut. Le body a une couleur de fond vert fonce et le 
selecteur contenu une couleur de fond jaune tres clair, tandis que le vrai 
contenu de la page (la colonne centrale) a une couleur qui tranche, jaune 
avec une pointe de vert. La propriete text-al ign est destinee a Internet 
Explorer : elle aligne les boites et met le conteneur contenu au milieu de 
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la page. Pour les autres navigateurs compatibles CSS, la facon d'aligner 
la boite au centre est margi n : auto dans la boite elle-meme. La position 
du conteneur contenu n'est pas precisee car il n'est pas necessaire de la 
sortir du flux, puisqu'elle est la seule a son niveau. Comme il a fallu 
attribuer la valeur center a text-align a cause d'Internet Explorer, il 
faut rectifier pour les autres navigateurs avec text-align: left et 
remettre le texte avec un fer a gauche. De meme, la propriete max-width 
n'est pas reconnue par Internet Explorer. Ainsi, il est utile d'ajouter un 
selecteur uniquement compris par ce navigateur. 

/* destine a IE */ 
* html divlcontenu ( 
width: 770px; 

} 

Sans ce selecteur factice, le conteneur contenu remplirait toute la page 
dans toute sa largeur. Les autres boites se placent dans cette boite. Le titre 
est place dans le flux. Les trois colonnes sont flottantes a gauche. 

#titre { 

text-align: center; 
margin: 15px; 
clear: both; 

} 

L'indication cl ear: both est une securite. En effet, les boites qui suivent 
le titre sont flottantes, pour s'assurer qu'il occupe toute la largeur sans 
qu'aucune boite ne s'y glisse. Cette propriete n'est pas necessaire ici, mais 
elle peut etre utile dans d'autres circonstances. 

II est important de s' engager dans un processus qui aboutit a une solution 
ou a une autre car l'application des CSS demande de la patience et de la 
creativite. II ne suffit pas d'appliquer les regies qui sont theoriques, 
d'autant qu'elles ne s'appliquent pas de la meme facon selon les 
navigateurs. Cette conformite est ce qui est le plus consommateur de 
temps avec les CSS. Au fil des versions des navigateurs, on peut esperer 
une certaine normalisation pour que les developpeurs puissent se concen- 
trer sur l'aspect de la page plutot que sur du code bricole. Les boites 
flottantes sont interessantes parce qu'elles permettent, de la meilleure 
facon qui soit, de placer des boites cote a cote. Cependant, ce processus 
est fragile et il suffit parfois d'un ajout pour bousculer le bel ordonnan- 
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cement (et il n'est pas forcement aise d'en deviner la cause). Le travail sur 
les CSS demande une certaine connaissance du code, et du pragmatisme 
double d'opportunisme. 

Voici l'hypothese de depart : 

■ La largeur du contenu est definie a 770 px, quel que soit l'affichage de 
l'ecran. 

■ La largeur de la colonne centrale est definie a 400 px. 

■ II reste 330 px pour les deux colonnes laterales de navigation et leurs 
marges externes. 

Voici le raisonnement suivi : 

■ Ici, il est impossible de mettre une boite en position absolue car la 
page est centree et la distance jusqu'au bord du navigateur est 
inconnue car elle depend de la definition de l'ecran. 

■ En mettant la colonne centrale en position relative et en utilisant des 
colonnes laterales flottantes, on se heurte a une difficulte : la colonne 
de droite est renvoyee en dessous des deux autres colonnes. 

■ Faisons flotter les trois colonnes et observons le resultat dans un 
navigateur conforme comme Firefox 1.5 : 

- La colonne gauche flottant a gauche, la colonne centrale flottant a 
droite, la colonne droite flottant a droite. Resultat : la colonne 
centrale va a droite et la colonne de droite est renvoyee en dessous. 

- La colonne gauche flottant a gauche, la colonne centrale flottant a 
gauche, la colonne droite flottant a droite. Resultat : tout se tient 
mais si Ton fait un zoom arriere sur la page, la colonne de droite 
fuit sur la droite, ce qui cree une dysharmonie. 

- La colonne gauche flottant a gauche, la colonne centrale flottant a 
gauche, la colonne droite flottant a gauche. Resultat : tout se tient. 

Par consequent, la meilleure solution est la troisieme. II reste cependant 
plusieurs ecueils : il va falloir ruser pour faire accepter cette mixture de 
code a Internet Explorer. II faudra done ajouter des ingredients et lui faire 
avaler le tout. En fait, le navigateur conforme sert d'etalon, il faut ensuite 
ajuster le resultat pour plaire au plus grand nombre possible de 
navigateurs. 
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div#corps { 
float: left; 

background-color: IE2EA8A; 

font-size: 0.75em; 
width: 400px; 

padding: 0 20px 20px 20px; 
background-col or: transparent; 
background-repeat: repeat-y; 
background-posit ion: top; 

background -image: url ("images/fond_corps .gi f ") ; 

} 

divlnavigauche { 
top: lOOpx; 

z-index: 2; 

margin: 0 lOpx; 

padding: Opx; 

float: left; 

color: IE2EA8A; 

font-size: 0.75em; 

} 

divlnavidroite { 

margin: 0 lOpx; 

top: lOOpx; 

right: 0; 

padding: Opx; 
float: left; 

color: IE2EA8A; 

font-size: 0.75em; 
clear: right; 
} 

Sur le navigateur Firefox, la page est parfaitement ordonnancee. II reste a 
lui adjoindre quelques courbes pour adoucir les angles droits tellement 
impersonnels. Pour cela, on peut utiliser toutes sortes de logiciels 
graphiques, vectoriels ou non, mais le plus facile pour avoir un resultat 
propre est de recourir a un logiciel vectoriel comme Illustrator. Ensuite, il 
n'y aura plus qu'a inserer ce motif dans la boite contenu comme motif de 
fond, en le placant en haut et sans repetition. 

Au moment de l'execution, tout n'est pas parfaitement aligne. II faut alors 
ajouter une bordure de la meme couleur que celle du fond de page, pour 
couper ce qui depasse et qui n'est pas droit. 
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div#contenu { 
background :#ff ffel; 

background-image: url ("images/haut.gif") ; 

background -repeat: no- repeat ; 

background-position:top left; 

max-width: 770px; 

margin: lOpx auto 0 auto; 

text-align: left; 

border: lpx solid #233A00; 

padding: 0; 

} 

II faut maintenant s'occuper des internautes qui utilisent Internet Explorer 
en adjoignant au code des "vermes" qui seront comprises uniquement par 
ce navigateur, arm d' assurer un aspect uniforme pour tous. 

Une fois le probleme de la largeur du conteneur contenu resolu, il reste 
le probleme de la largeur du conteneur corps. On ajoute un selecteur qui 
ne sera pris en compte que par Internet Explorer. Comme Internet 
Explorer mesure les boites de maniere particuliere, on en tient compte en 
mettant les marges en negatif. 



* html div#corps { 




margin: 0 -40px 20px 


-40px; 


padding: 0 40px 20px 

} 


40px; 



Le processus doit etre complete avec un bidouillage dans le selecteur 
corps, qui reajuste l'affichage dans Firefox. 



divlcorps { 
float: left; 

background-color: IE2EA8A; 
font-size: 0.75em; 
voice-family: "\"}\""; 
voice-family: inherit; 
/* On annule 1 ' i nformation precedente */ 
width: 400px; 
margin: 0 0 20px 0; 
padding: 0 20px 20px 20px; 
background-col or: transparent; 
background-repeat: repeat-y; 
background-posit ion: top; 

background -image: url ("images/fond_corps .gi f ") ; 

} 
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La creation des coins ou des chapeaux de bofte 

La creation des coins peut paraitre un sujet qui ne concerne pas les CSS. 
Mais c'est une technique qui merite d'etre traitee dans ce livre car tout 
developpeur est oblige de s'en servir de temps en temps. La meilleure 
facon d'operer est de recourir a un logiciel de type vectoriel comme 
Illustrator ou le logiciel libre Sodipodi telechargeable sur 
www . f ramasof t . net /art i cl el589 . html . 
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Figure 5.53 : Framasoft 




Le processus consiste a creer un quart de cercle dans un carre ou un 
rectangle. II faut commencer par inscrire le quart du cercle dans le carre. 
Le cercle est de la couleur de la partie interieure de la boite et le carre de 
la partie exterieure. Avec l'effet miroir, on copie le motif en miroir puis on 
suspend les deux objets a une bordure de 770 px pour le site Ecoute S'il 
Pleut. II faut se servir de l'outil d'alignement pour que les deux coincident 
parfaitement. 
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Ensuite l'exercice consiste a enlever les points d'ancrage du cercle de 
facon a avoir un arc de cercle a angle droit qui fait le quart du cercle, 
parfaitement superpose sur Tangle droit du carre. Cette maniere un peu 
rudimentaire permet de moduler l'arc de cercle a son gre. 



11 



< Figure 5.54 : 

Avec un logiciel vectoriel 



Sinon, la maniere de faire la plus simple pour avoir une tete et un pied de 
boite est de creer un rectangle a coins arrondis sur un fond transparent puis 
de le couper pour en extraire la tete et le pied. 

■* Figure 5.55 : 

Avec un 
rectangle a 
bords arrondis 





La couleur transparente 

Internet Explorer a un probleme avec la transparence, surtout 
pour les images PNG, dont la transparence est coloree en bleu 



Double Poche CSS • 643 



Etudes de terrain 



Les difficultes rencontrees 

Les difficultes rencontrees tiennent aux presupposes decides au depart. Le 
fait de definir la largeur de la boite contenu a 770 pixels permet d' avoir 
un site avec des arrondis, visible par tous les navigateurs. Cette force est 
aussi une fragilite. En effet, la largeur de la partie centrale est difficile a 
maitriser sous Internet Explorer, ce qui fait que cette colonne mord sur les 
deux autres sises de chaque cote. II est aussi difficile d'ajouter des images 
dans les deux colonnes laterales sans bousculer tout le reste. II faut en fait 
calculer precisement la largeur des images a inserer. Le tout n'est pas 
precisement au centre car on n'a pas encore les elements flottants centres, 
mais tout se tient quand meme. 



Fichier Edition Affichage ABera Marque-pages Outils 
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Bieiivenue ;ui \ j;u <lins d'eoonte s'il 
pie nt 

Un lieu magique 

Diversite du paysage 

Situes dans le peri metre du massif fbrestier de 
Mervent Vouvant, Anne-Mane et Pierre-Jean vous 
regoivent dans ieurs gites en sud Vendee dont le 
paysage sauvage a secrete des legendes multiples 
comme celle du Pont du Deluge, de la fee Melusine et 
d'Ecoute s'U pieut. 

Anne-Marie. Pierre-Jean etleurs enfants 

Dans ces lieux magiques, Anne-Mane vous fera 

decouvrir les especes botaniques rustiques, 

Ses compagnons de travail (poules, moutons, chats) 

contnbueront a la joie des enfants, 

Pierre- Jean vous guidera dans la for^t de son 

enfance. 

Vous decouvrirez comment ils redonnent vie a des 
terrains stenles avec des especes locales. 

I'n tissn relation 11 el 

Ce lieu d'accueil, d'echange, de rencontres s'accroche 
egalement a d'autres lieux amis ou artistes, artisans, 




Les pepinieres 




A Figure 5.56 : Reduction de la fenetre avec la version 1 
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▲ Figure 5.57 : Reduction de la fenetre avec la version 1 




A Figure 5.58: Version 1 sous IE 
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Fichier Edition Affichage Favoris Outils ? 



ecoute s'il pleu 



Bienvenue aux jardins d'ecoute s'il pleut 
□ivershe du pay *»ge 



:u«s dans le pe'rimetre du massif forestier d« Mervent Vouvant, Anne-Marie et Pierre-J' 
us recoivent dans leurs gltes en sud Vendee dent le paysage sauvage a secrete des 
lendes multiple-- com me cell* du A>nt fle/u^e, h '.= » ■ . -t li'taate '.''.>' c>kut. 




Ame-Marie, vicore-JeanetleuH MfaMts 



Dans ces lieu h magiques, Anne-Marie vous fera decouvrir les especes botaniques rustiqi 
Ses compagnons d« travail (poules, moutons, chats) contributront a la joie des enfants. 
Pierre-Jean vous gulden dans la forit d* son enfance, 

Vous de'couurirez comment ils redonnentwie a des terrains steriles avec des especes loc 



PAYS DE LA 



■ J, ■ I 

^ Internet 



▲ Figure 5.59: Version 1 avec fenetre reduite sous IE 

Finalement, pour le site ardaee.com, il a fallu revenir aux boites a 
positions relatives et absolues car les boites flottantes pour les trois 
colonnes centrees dans le navigateur n'ont pas de gouttieres precises. Les 
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CSS obligent a des compromis pour la disposition. Les boites principales 
flottantes sont plus adequates et simples pour une page alignee a gauche 
de la fenetre du navigateur. 

divlcontenu { 

background: #ffffel url ("images/haut_droite_petit.gif") 
no-repeat right top; 
width: 85%; 

margin: lOpx auto 0 auto; 
text-align: left; 
border: lpx solid I90C528; 
padding: 0; 

} 

.gauche{ 

padding-top : lem [important; 

background: transparent url ("images/haut_gauche_petit.gif") 
S-= no-repeat left top; 

} 

/* destine a IE */ 

* html divlcontenu { 

text-align: center; 
width: 770px; 

} 

divlcorps { 

position: relative; 

background-color: IE1EB89; 

font-size: 0.75em; 
voice-family: "\"}\""; 
voice-family: inherit; 
/* On annule 1 ' i nformation precedente */ 

width: 500px; 

margin: 0 auto 20px auto; 

padding: 0 20px 20px 20px; 

background-col or: transparent ; 

background-repeat: repeat-y; 

background-posit ion: top; 

background- image: url ("images/fond_corps .gif ") ; 

} 

* html divlcorps { 

word-wrap: break-word; 

text-align: left; 

z-index: 1; 

width: 300px; 

margin: 0 20px 20px 20px; 

padding: 0 60px 20px 60px; 

position: relative; 
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} 

divlnavi gauche { 

background: IFFFFE1; 
width: 200px; 
left: 0; 
top: 40px; 
position: absolute; 
margin: 10%; 
padding: Opx; 
color: #FFF; 
font-size: 0.75em; 

} 

divlnavi droite { 

background: IFFFFE1; 
width: 200px; 
position: absolute; 
right: 0; 
top: 40px; 
margin: 10%; 
padding: Opx; 
color: #FFF; 

background-color: IFFFFEl;; 
font-size: 0.75em; 

} 

* html divlnavi gauche { 

background: Iffffel url ("images/haut_gauche_petit.gif") 
no-repeat left top; 
top: 30px ; 
left: 40px ; 
text-align: center; 
padding: 20px 20px 20px 20px; 

} 

* html divlnavidroite { 

background: Iffffel url ("images/haut_droite_petit.gif") 
no-repeat right top; 
right: 40px ; 
top: 30px ; 
text-align: center; 
padding: 20px 20px 20px 20px; 

} 

Les coins ont ete reduits a 30 pixels et une balise hr a ete ajoutee pour, 
avec le conteneur contenu, apposer les deux coins superieurs. 
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▲ Figure 5.60 : Le nouveau site 

<div id="contenu"> 

<div class="gauche"x/div> 

<div> 



Les deux menus lateraux se glissent sous la colonne centrale dans une 
fenetre reduite, ce qui oblige a tripler la barre de navigation en pied de 
page afin que les visiteurs qui disposent d'ecran de faible resolution, 
puissent naviguer. 



^Acc^iihles 



Ce site a ete congu et realise par Jean Carfantan © 2006 ardaee.com 

;pi:c .p|l| | Les qite? 1 Venir | Visite; | Notre Proiet I Liens amis ifflflfffff 1 Les pr-sun >:■ | . ' -m 1 1 l,o- I 1 ji *^n^ fr.s 

■BJJ PAYS DE LA fS,k M 
■Si LOIRE BO-*- 



▲ Figure 5.61 : Les liens en pied de page 
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Les jardins d &OUte s'U pkut 
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▲ Figure 5.62: La version 2 avec reduction de fenetre 




▲ Figure 5.63 : Version 2 sous IE 
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▲ Figure 5.64: Version 2 avec fenetre reduite sous IE 



Sans doute pour rendre le site "parfait", faudrait-il passer plus de temps et 
complexifier le code, mais le but est avant tout de communiquer et de se 
faciliter la tache avec les CSS. II est clair que les CSS n'ont pas encore 
atteint leur maturite mais elles restent neanmoins un progres par rapport 
aux tables. 
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6 Les regies d'accession a la propriete 

Internet murit et s'interesse a l'accessibilite, c'est-a-dire qu'il se preoc- 
cupe de savoir si tout le monde a acces au contenu des pages. Internet, et 
l'informatique en general, s'est construit autour d'un utilisateur sans 
handicap. Mais qu'en est-il par exemple des personnes qui ont une 
mauvaise vue, voire des aveugles, des daltoniens, des personnes qui ne 
peuvent utiliser une souris ? Un certain nombre de regies permettent aux 
handicapes, quel que soit leur niveau d'handicap, de naviguer sur le Web 
et de profiter de toutes les ressources disponibles. En fait, conformer un 
site aux criteres de l'accessibilite oblige a porter une attention particuliere 
a la communication, a la rigueur et a la coherence, ce qui profite aux 
handicapes, et plus generalement a tous, y compris au webmaster. 
Quiconque peut, un jour, se retrouver invalide temporairement ou defini- 
tivement, au point de ne plus pouvoir utiliser Internet. 

■* Figure 6.1 : 

Accessibilite 




Definition de l'accessibilite 

L'accessibilite a ete definie comme le fait de mettre le Web et 
ses services a la disposition de tous les individus, quels que 
soient leur materiel ou logiciel, leur infrastructure reseau, leur langue 
maternelle, leur culture, leur localisation geographique ou leurs aptitu- 
des physiques et mentales. 



L'accessibilite est une philosophie de vie. C'est la vraie democratie, 
quand la majorite porte son attention sur les problemes de la minorite. 
L'accessibilite commence quand un developpeur, lui-meme utilisateur de 
PC, s'inquiete du visiteur qui possede un Macintosh ou de celui qui 
possede un vieux PC avec un affichage mediocre. Dans des pays comme 
la France, ou la polarite est tres forte, il est difficile de s'accorder sur des 
mesures qui se penchent sur la condition de vie d'un certain nombre de 
concitoyens. Et pourtant une loi a ete votee dans ce sens. 

La France a vote une loi en fevrier 2005 dont un article impose que les 
sites web de l'Etat et des collectivites territoriales repondent aux normes 
internationales d'accessibilite. Peu de sites respectent encore ces regies, 



654 • Double Poche CSS 



mais cette norme deviendra incontournable et s'inscrira de plus en plus 
dans le cahier des charges de creation de sites. Si ce label aide a 
F accession de tous au Web, il rehausse, en meme temps, l'image de 
marque du site et done de la societe qu'il represente. La qualite des sites 
accessibles est grandement eprouvee car l'accessibilite oblige a se poser 
des questions sur l'ergonomie, la communication, etc. Ce type de site offre 
un panel complet des moyens de communication, avec une diversite de 
passerelles. 

Dans la vie reelle, l'humain a acces a de nombreux stimuli (visuels, 
auditifs, olfactifs...), qui lui permettent de communiquer avec le monde. 
L'accessibilite restituer cette polyphonie de la vie sur le Web. Les 
technologies se developpent de jour en jour pour rendre la navigation sur 
le Web plus agreable pour tous. Ainsi le site Agoravox propose une 
fonctionnalite qui genere un fichier MP3 ou une voix lit les articles du site. 
Agoravox (www.agoravox.fr) utilise, pour ce faire, la technologie 
Readspeaker, qui oblige a davantage de rigueur car un texte mal ecrit est 
lu plus difficilement et une simple erreur de ponctuation nuit a la 
comprehension d'une phrase. Les redacteurs auront tout interet a passer 
leurs textes a la moulinette de Readspeaker : ce faisant, ils les ameliore- 
ront notablement. 







OR 




Le media cloven 











▲ Figure 6.2 : Agoravox 
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La rigueur, l'ergonomie, la structuration des contenus sont des elements 
cles pour que ces contenus s'adaptent facilement a n'importe quel media 
et se transportent avec souplesse d'un site a l'autre avec un minimum de 
traitement. Desormais, l'internaute pourra choisir son mode de connais- 
sance d'une page web : il preferera l'entendre, ou naviguer par la voix, le 
clavier, la voir sur son telephone ou sa television. C'est cette diversite qui 
repond le mieux a revolution generale de la societe. Avant d'aller plus 
loin, validez vos pages sur www.ocawa.com. 



>• 9 



WA 



O « id 
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Presentation d Ocawa 
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d"un* page Web, 

e La visualisation des emsurs d access*ilUe 
directement sur te code source et 
preosement sur la bal<se concemee. 

• La poss*ilH* daudtter un site oomptet 
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Accessibility Ocawa (10 
pages) 



rotuil 



Culture aouv fr 63 reman 



remargues 
.Hue de ville de 

m qua* 



Treves de bavardege. testez-le ' 



raccessCHite dune page hap// 
pour tester jusqu** 10 pages de votre site Internet en un seul audit i 



A 



a Figure 6.3 : Ocawa 

6.1 Le doctype 

Le doctype donne la grammaire selon laquelle la page est constraite. II 
parle directement au navigateur. Si les pages sont deja construites sans 
doctype, il suffit d'ajouter une declaration de type : 



<!D0CTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//FR" 
X "http://www.w3.org/TR/html 4/1 oose.dtd"> 
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Si la presentation de la page est modifiee, il suffit d'ajouter : 
<!D0CTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional //FR"> 



6.2 La langue 



II est important, pour les navigateurs qui naviguent en lisant le contenu 
des pages pour les malvoyants ou les aveugles, de connaitre la langue 
utilisee dans ces pages. Cette indication se fait dans la balise html et a une 
syntaxe particuliere selon le doctype. 



Liste des icones pour "Drapeaux 
du monde / Drapeaux" 



< Figure 6.4 

Langues 
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II 
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A H 4 


A i3l il 



Avec le HTML 4, la balise html est modifiee par l'ajout de la propriete 
1 ang avec comme valeur le code ISO. 

<html lang="fr"> 

Pour le XHTML 1.0, la balise html est enrichie de deux proprietes. La 
propriete 1 ang subsiste mais elle n'est presente que pour assurer la 
compatibilite avec les anciens navigateurs. 
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<html xml ns="http:/ /www. w3.org/1999/xhtml " 
lang="fr" xml : 1 ang="f r"> 

Enfin, le XHTML 1.1 exige la propriete xml : 1 ang dans la balise html . 

<html xml ns="http://www. w3.org/1999/xhtml " xml : 1 ang="f r"> 

Si une page est redigee en plusieurs langues, la propriete xml : 1 ang peut 
enrichir une balise p par exemple, ou d'autres balises, pour specifier les 
langues en question. 

6.3 Les titres 

Le titre est un element primordial dans une page. II s'affiche sur la bordure 
superieure du navigateur et annonce, comme une enseigne de magasin, ce 
qui sera mis a la disposition de l'internaute, au niveau du site et de la page 
elle-meme. II s'agit d'inciter le visiteur a cliquer sur le lien du titre. II est 
recommande d'inclure le nom du site dans tous les titres des pages. 



Les jardins c eCOUte s'U pkut 



a Figure 6.5 : Titre 

6.4 Les liens 

Cliquer sur un lien est une aventure, surtout pour l'internaute qui ne 
beneficie pas du haut debit. Le lien se doit d'etre court et n'a pas 
forcement a expliciter sa destination. C'est la qu'intervient la propriete 
title, qui affiche une etiquette explicative dans le navigateur. L'intitule 
dans un lien ou dans un title ne doivent pas depasser 80 caracteres. 



Tous les drapeauy du mnnrift 

^^^^"^L-siCe site expose tous les drapeaux du monde 



▲ Figure 6.6 : Title 
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6.5 Les elements de formulaires 

Pour l'accessibilite d'un formulaire, il est judicieux d'utiliser la balise 
fieldset, qui encadre les champs regroupes par signification. Dans un 
questionnaire, il est ainsi possible de regrouper dans un f i el dset tous les 
champs concernant l'etat civil, puis dans un autre ceux definissant les 
gouts personnels, enfin dans un troisieme ceux relatifs aux observations 
personnelles. Un fieldset ne touche pas a la presentation directement, 
mais le navigateur trace un encadrement avec des coins arrondis. 

<form action="..." method="post"> 
<P> 

<fieldset> 

<legend>Etat civil</legend> 

<label for="nom">Nom :</label> 
<input id="nom" type="text" tabindex="l"> 

<1 abel for="prenom">Prenorti :</label> 
<input id="prenom" type="text" tabindex="2"> 

<label for="adresse">Adresse :</label> 
<input id="adresse" type="text" tabi ndex="3"> 
</fieldset> 

</p> 
<fieldset> 
<1 egend>Questi onnai re</l egend> 
Ce site est :<br /> 
<input name="avis" 

type="checkbox" 

value="ergonomique" id="ergonomique" tabindex="20"> 
<label for="ergonomique"> Ergonomique </label> 
<input name="avis" 

type="checkbox" 

val ue="beau" id="beau" tabindex="21"> 
<label for="beau"> Beau </l abel > 
<input name="avis" 

type="checkbox" 

value="interessant" id="interessant" tabindex="22"> 
<label for="i nteressant"> Interessant </l abel > 
<input name="avis" 

type="checkbox" 

val ue="compl et" id="complet" tabindex="23"> 
<1 abel for="compl et"> Complet </l abel > 
</fieldset> 

</p> 
<p> 
<fieldset> 
<legend>Amel iorations</legend> 
Pensez-vous que nous puissions l'ameli'orer ? 
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<input name="amel ioration" 




type="radio" 




value="oui" id="affirmative" tabindex= 


"35"> 


<label for="aff i rmati ve"> Oui </label> 




<input name="amel ioration" 




type="radio" id="negative" 




value="non" tabindex="35"xlabel for=' 


negative"> Non 


</labelx/p> 




<pxlabel for="suggestions">Si vous pensez que nous 


pouvons ameliorer ce site, faites nous part de 


vos 


suggestions :</label> 




<textarea name="suggestions" id="suggestions' 




rows="20" cols="50" tabi ndex="40"> 




</textarea> 




</fieldset> 




</P> 




</form> 





La propriete tabi ndex permet de naviguer d'un champ a l'autre. L'ordre 
va du plus petit au plus grand sans qu'il soit necessaire d'avoir des valeurs 
qui se suivent. Un champ avec une valeur negative sera ignore. 

Dans l'exemple, la balise 1 abel est utilisee pour accompagner les champs 
du formulaire. Cette balise est reliee par sa propriete for a la propriete i d 
du champ de formulaire. 



Eut civil 



Qu»irio«in»ir« 



P«ns«-voui qu« now. putf.ioo: l'am*lkx*r " 



mwm 



m 



A Figure 6.7 : Fieldset 
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6.6 Les tableaux 

La plupart du temps, les tableaux ne sont pas utilises pour ordonner des 
donnees, comme c'etait le cas a l'origine. On detourne leur fonction pour 
structurer une page et disposer les differents elements, ce qui pose 
probleme. 

Un tableau est habituellement cree comme ceci : 

<TABLE B0RDER> 

<CAPTION>Titre du tabl eau</CAPTION> 
<TR> 

<TH>lre colonne</TH> 

<TH>2e colonne</TH> 

<TH>3e colonne</TH> 
</TR> 
<TR> 

<TD>A</TD> 

<TD>B</TD> 

<TD>C</TD> 
</TR> 
<TR> 

<TD>D</TD> 

<TD>E</TD> 

<TD>F</TD> 
</TR> 
</TABLE> 

La balise caption donne le titre du tableau juste au-dessus de celui-ci. La 
balise th donne le titre des colonnes. On peut ajouter la propriete 
summary, qui ne sera pas affichee mais qui sera percue par les navigateurs 
audio. 

<table border="0" summary="Les 6 premieres lettres de 1 'alphabet. Le 
s< tableau est constitue de 2 rangs et 3 colonnes. "> 

La norme d'accessibilite recommande d'utiliser les proprietes headers, et 
la propriete abbr des que le titre d'une colonne contient plus de 
15 caracteres (voir Figure 6.8). 
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Fichier Edition 


Affichage Aller a 


Marque-pages Ouflls ? 














Mois 


plantes vivaces fleurs 


plantes grasses 




Jan. 


1.254,00 € 


3.054,00 € 


1.574,80 € 




Fev. 


1.378,00 € 


3.452,00 € 


1.758,80 € 




Mars 


1.459,00 € 


3.987,00 € 


1.862,00 € 




S/Total 


4.091,00 € 


10.493,00 € 


5.194,80 € 




Termine 





A Figure 6.8 : Tableau des ventes 



<table summary="Tabl eau des ventes des plantes au cours 

du premier trimestre de l'annee 2005 "> 

<caption>Vente par trimestre - annee 2005</caption> 

<colgroup align="char" char=","> 

<col width="2*" /> 

<col width="3*" /> 

<col width="3*" /> 

<col width="3*" /> 

</col group> 

<thead> 

<tr> 

<th id="entetel">Mois</th> 

<th id="entete2" abbr="vivaces">pl antes vivaces</th> 
<th id="entete3">fleurs</th> 

<th id="entete4" abbr="grasses">pl antes grasses</th> 

</tr> 

</thead> 

<tfoot> 

<tr> 

<td headers="entetel">S/Total</td> 

<td headers="entete2">4.091,00 »</td> 

<td headers="entete3">10.493,00 a</td> 

<td headers="entete4">5. 194,80 »</td> 

</tr> 

</tfoot> 

<tbody> 

<tr> 

<td headers="entetel">Jan.</td> 

<td headers="entete2">1.254,00 °</td> 

<td headers="entete3">3.054,00 »</td> 

<td headers="entete4">1.574,80 »</td> 

</tr> 

<tr> 
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<td headers="entetel">Fev.</td> 

<td headers="entete2">1.378,00 a </td> 

<td headers="entete3">3.452,00 »</td> 

<td headers="entete4">1.758,80 °</td> 

</tr> 

<tr> 

<td headers="entetel">Mars</td> 

<td headers="entete2">1.459,00 a </td> 

<td headers="entete3">3.987,00 »</td> 

<td headers="entete4">1.862,00 »</td> 

</tr> 

</tbody> 

</tabl e> 

La balise col group envoie au navigateur des informations sur le nombre 
et la proportion des colonnes et permet au tableau de s'afficher progres- 
sivement. Elle doit etre placee juste apres la balise table. 

La propriete width donne un ordre de grandeur de la colonne par rapport 
a la taille totale du tableau. Grace a ce type de positionnement, le tableau 
se deploie harmonieusement sur la page. 

Les proprietes al i gn="char" et char="," gerent l'alignement dans la 
colonne en question. Elles demandent ici au navigateur d' aligner la 
colonne sur le caractere virgule. 

Trois groupes sont ici deployes, materialises par les balises thead, tfoot 
et tbody. La balise thead regroupe toutes les balises th et definit l'en-tete 
du tableau. Elle est suivie par la balise tfoot, qui circonscrit le pied du 
tableau. Enfin vient le groupe tbody, qui caracterise les cellules du corps 
du tableau. La feuille de style est simple. 

caption { 
border: thick; 
background-color: I00CC36; 

} 

#entetel, #entete2, #entete3, #entete4 { 
border: thick; 
background-color: IF6E730; 

} 

tfoot { 

font-weight: bold; 
} 
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6.7 Les listes 

Les enumerations de liens ou d'autres items sous forme de listes doivent 
pouvoir etre identifiees comme telles. Une enumeration est un ensemble, 
et non pas plusieurs elements isoles les uns a cote des autres. 

Un exemple courant de liste est celle utilisee pour afficher des liens, y 
compris dans un menu de navigation. 

Voici les liens vers les journaux francais : 



<img src 
<a href= 
<img src 
<a href= 
<img src 
<a href= 
<img src 
<a href= 
<img src 
<a href= 



"/images/puce_sympa.gif" width="8" height="8"> 
http://www.lemonde.fr/">Le Monde</a> <br> 
"/images/puce_sympa.gif" width="8" height="8"> 
http://www.li beration. f r/">Li berati on</a> <br> 
"/images/puce_sympa.gif" width="8" height="8"> 
http://www.lefigaro.fr/">Le Figaro</a> <br> 
"/images/puce_sympa.gif" width="8" height="8"> 

http://www.humani te.presse.fr/">L' Human i te</a> <br> 
"/images/puce_sympa.gif" width="8" hei ght="8"> 

http://www.1 a-croix.com/">La Croix</a> <br> 



Fichier Edition Afflchage Altera Ma 

8 Le Monde 

• Liberation 

• Le Figaro 

• L'Humanite 
° La Croix 



•* Figure 6.9 

Journaux 
frangais I 



http: //www. liberation, fr/ 



Rien, a part la vision de la page, ne permet au navigateur de savoir qu'il 
s'agit d'une liste. Cela a l'apparence d'une liste, mais sans en etre une. 
Une solution pour que le navigateur s'y retrouve est de lui fournir des 
indices. II s'agit d'inserer les proprietes al t et title avec respectivement 
comme valeurs * et une chaine vide. 
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<img alt="*" title="" src="/i ma 9 es /P uce _ s y m P a -9 : if " width="8" 
height="8"> 

<a href="http://www.lemonde.fr/">Le Monde</a> <br> 

<img alt="*" title="" src="/'' ma 9 es /P uce _ s y |T, P a -9'''' : " width="8" 

height="8"> 

<a href="http://www.l i beration. f r/">Li beration</a> <br> 
<img alt="*" ti tl e=" " src="/im a ges/puce_sympa.gif" width="8" 
height="8"> 

<a href="http://www.lefigaro.fr/">Le Figaro</a> <br> 

<img alt="*" ti tl e=" " src="/i ma 9e s /P uc e_ s y m P a -9if" width="8" 

height="8"> 

<a href=" http://www.humani te.presse.fr/">L' Humani te</a> <br> 
<img alt="*" title="" src="/"' ma 9 es /P uce _ s y |T, P a -9'i'' : " width="8" 
height="8"> 

<a href=" http://www.la-croix.com/">La Croix</a> <br> 
< Figure 6.10 : 

Journaux frangais 2 



Fjchier Edition Affichag< 

° Le Mor^ e 

• Liberation 
° Le Figaro 

• L'Humanite 

• La Croix 



http://www... 



Cette solution n'est cependant pas optimale car elle ne fait pas intervenir 
les feuilles de style. Une technique plus appropriee consiste a introduire la 
propriete list-style dans un selecteur ul. 

ul . journauxl { 

list-style: url (/images/puce_sympa.gif) disc; 

} 

La liste devient alors : 
<ul cl ass=" journaux"> 

<lixa href="http://www. 1 emonde. f r/">l_e Monde</ax/l i> 
<1 ixa href ="http: //www. 1 i berati on. fr/">Li berati on</ax/l i> 
<lixa href="http://www.lefigaro.fr/">Le Figaro</ax/l i> 
<lixa href=" http://www.humanite.presse.fr/"> 
L'Humanite</a> </li> 

<lixa href=" http://www.la-croix.com/">La Croix</ax/l i> 
</ul> 
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L'image sera affichee comme une puce par la plupart des navigateurs. Les 
autres afficheront des puces a la place de l'image. 



Flchier Edition Affichage Allera Ma 

A 

• Le Monde 

• Liberation 

• Le Figaro 

• L'Humanite 

• La Croix 
zi 

Termine 



Certains ne se posent pas de questions et se contentent d'aligner des liens 
dans une boite. 

<div al ign="l eft"> 
<a href="http://www. lemonde. fr/">Le Monde</axbr /> 
<a href="http://www. 1 iberation.f r/">Liberation</axbr /> 
<a href="http://www. lef igaro.f r/">Le Figaro</axbr /> 
<a href=" http://www.humanite.presse.fr/">L'Humam'te</a> 

<br /> 

<a href=" http://www.la-croix.com/">La Croix</a> 
</di v> 

lis pourraient faire de meme en designant clairement cette enumeration 
comme une liste. 

ul .journaux { 
list-style: none; 
} 

Quelle que soit la maniere, le balisage de la liste n'a pas change, comme 
dans l'exemple precedent : 

<ul cl ass=" journaux"> 

<lixa href="http://www. 1 emonde. f r/">Le Monde</ax/l i> 

<1 ixa href="http://www. 1 iberation. f r/">Liberation</ax/l i> 



< i-igure o.n 

Journaux 
fran^ais 3 
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<1ixa href="http://www.lefigaro.fr/">Le Figaro</ax/l i> 

<lixa href=" http://www.humani te.presse.f r/">L 1 Humani te</a> 
</li> 

<lixa href=" http://www.la-croix.com/">La Croix</ax/l i> 
</ul> 



L'Humahite 
La Croix 



http://www... 



Quelquefois, il vaut mieux ne pas aller trop vite et reflechir quelques 
secondes pour eviter des desagrements aux visiteurs du site. Quand 
l'habitude est prise, le developpeur n'a meme plus besoin d'y penser, cela 
devient un reflexe. 



La propriete alt est toujours presente et a une valeur, sauf pour les 
elements sans signification, qui ne sont la que pour ajuster la mise en page, 
comme les pixels transparents. Pour les elements graphiques non signi- 
ficants, la balise alt doit etre vide, sans texte ni espace. Ainsi, les 
navigateurs qui lisent le contenu des pages ne tiendront pas compte de ces 
elements. La balise al t permet de naviguer sans afficher les images pour 
les navigateurs texte comme Lynx (jeu de mots construit sur le terme 
anglais "links") http://lynx.isc.Org/lynx2.8.5. Un emulateur Lynx 
permet d'acceder a l'affichage de Lynx sans qu'il soit necessaire de le 
telecharger (www. delorie.com/web/lynxview. html). 



Rchier Edition Afflchagc 



< Figure 6.12 : 

Joumaux frangais 4 




Le Monde 
Liberation 
Le Fiaaro 



6.8 Les images 
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Jy Les pixels transparents 

Une des astuces utilisees par les developpeurs et les graphis- 
tes consiste a ajouter des images GIF transparentes pour caler 
les colonnes et les differents elements de la page. 



Le nombre de caracteres dans la propriete alt ne peut depasser 60, 
excepte quand l'image sert de lien, la limite etant alors de 80 caracteres. 




. En contradiction avec le XHTML 

Une balise alt sans valeur utilisee pour les elements graphi- 
ques decoratifs ou utilitaires est en contradiction avec I'imperatif 
du XHTML de donner une valeur a toutes les proprietes. C'est un choix. 
Entre I'accessibilite et les regies strictes du XHML, il faut parfois choisir. 
II reste cependant possible de lui donner comme valeur un asterisque. 



6.9 Les abreviations 

Les balises acronym et abbr ont la propriete title, qui donne aux 
navigateurs la signification complete des abreviations ou autres 
acronymes. 

Avec la ocronym title="Societe Nationale des Chemins de fer 
s-= Frangai s">SNCF</acronym>, c'est possible, <abbr title= 
x "Monsieur">M</abbr> Dupont! 

C'est particulierement interessant pour les navigateurs qui lisent les pages 
web pour les non-voyants. 

6.1 0 Le charset ou tableau de caracteres 

La balise meta a obligatoirement comme propriete charset. Le charset 
sert a indiquer au navigateur le codage des caracteres. Le codage par 
defaut sur Internet est ISO-8859-1. 
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<meta http-equi v="Content-type" content="text/html ; 
x charset=iso-8859-l" /> 



Fichier Edition Affichage Aller a Marque-pages Outils ? 

Plus tA't, A son arrivAOe 
A l'aA©roport John Lenhon A 
Liverpool dans la nuit de jeudi, 
elle a A©tA© accueillie par des 
dizaines de manifestants 
scandant des slogans 
anti-guerre. 

j{ ^ jHL_ 

f^* Termine 

▲ Figure 6.13: Page avec un charset 8859-1 et des caracteres UTF-8 

Le probleme du systeme ISO-8859-1 est qu'il lui manque trois caracteres 
en frangais : CE, oe et Y. Pour rectifier le probleme, la norme ISO a ajoute 
le codage IS0-8859-15. 

<meta http-equi v="Content-type" content="text/html ; 
x charset=iso-8859-15" /> 

II existe aussi l'UTF-8, qui serait l'ideal et qui est la norme XML mais en 
HTML. L'affichage correct n'est pas certain. 

<meta http-equi v="Content-type" content="text/html ; charset=utf-8" /> 

6.1 1 La navigation 

La navigation parait aller de soi pour tout un chacun. Les liens sont 
affiches dans la page a un endroit visible, la purpart de temps en haut, a 
gauche ou encore a droite de la page. D'un point de vue visuel, 
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l'internaute ne peut pas les manquer. Mais pour un non-voyant dont le 
navigateur lit la page de maniere lineaire (ce qui est logique visuellement), 
cela peut devenir un cauchemar quand il faut passer par des contenus 
repetitifs et fastidieux. Certains amenagements simples sont necessaires. 

Une navigation homogene 

L'accessibilite d'un site se mesure aussi par l'homogeneite et la coherence 
de construction et de stracturation des pages. Les efforts lies a la 
structuration auront un impact direct sur la facilite de navigation et de 
lecture a travers les pages du site. 



Les gites 




Liens amis 
Contact 



Figure 6.14 

Le menu 



La barre du menus en version texte peut etre repetee en haut ou en bas. Le 
developpeur peut imaginer une lecture sequentielle de son site comme une 
visite guidee avec des liens vers la page principale puis celle qui suit dans 
un ordre donne pour donner le plus de sens possible a cette navigation. 
Ainsi la page principale peut ensuite conduire a la page de nouvelles, puis 
a la page du dernier article, etc. Les liens peuvent etre separes par un 
caractere sans signification comme I (sur le clavier du PC, il se trouve 
au-dessous du 6). 

Quand une page est longue, l'insertion de liens internes facilite Faeces a 
des parties precises de la page. 
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Si une page est trop lourde, il vaut mieux la diviser en plusieurs pages par 
egard pour tous ceux qui se connectent encore par modem. Le poids de la 
page est compose du poids du code source et de tous les fichiers 
peripheriques afferents, comme les images, les fichiers JavaScript, les 
fichiers son, les feuilles de style, etc. II est conseille d'eviter les pages qui 
font plus de 70 Ko et d'indiquer le poids de l'image que l'utilisateur 
s'apprete a afficher en cliquant sur la miniature correspondante. 

Les touches d'acces 

Les touches d'acces pour acceder aux liens sont tres pratiques. Tous les 
graphistes ou maquettistes professionnels le savent : utiliser les touches de 
raccourci va beaucoup plus vite que d'utiliser la souris. Les accesskey 
fournissent ces touches de raccourci dans un site pour naviguer d'une page 
a l'autre. La purpart des navigateurs y obeissent. Les utilisateurs qui 
n'utilisent pas un navigateur audio ne s'en apercoivent pas. Une solution 
est de faire commencer l'intitule de chaque lien avec une lettre differente 
et de s'en servir comme touche (toujours combinee avec (Ait] ou [Ait]+ ( Maj 1 
ou [ Ctrl 1 selon le navigateur). 

<a href="accuei 1 .htm" accesskey="a"xem>A</em>ccuei l</a> 
<a href =" catalogue. htm" access key="c"xem>C</em>atal ogue</a> 
<a href="magasin.htm" accesskey="m"><em>M</em>agasi n</a> 
<a href="nous_contacter.htm" accesskey="n"> 
<em>N</em>ous contacter</a> 

<a href="forum. htm" accesskey="f ">Notre <em>F</em>orum</a> 

II est aussi possible de mettre des chiffres (ceux en haut du clavier, non 
ceux du clavier numerique) comme touches d'acces. 

<a href="accuei 1 .htm" accesskey="l">Accueil</a> 

<a href="catalogue.htm" accesskey="2">Catal ogue</a> 

<a href="magasin.htm" accesskey="3">Hagasi n</a> 

<a href="nous_contacter.htm" accesskey="4">Nous contacter</a> 

<a href="forum.htm" accesskey="5">Forum</a> 

Une astuce interessante est d'afficher automatiquement les accesskey 
apres le lien pour en faciliter l'usage. Ici les touches d'acces sont inscrites 
entre crochets apres le lien. Cela ne fonctionne pas pour Internet Explorer. 
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a:after { 

content: " [" attr(accesskey) "] "; 
} 



Le site http://openweb.eu.org/articles/accesskey_essai_non 
_transf orme explique les procedures dans un article mettant en avant que 
les accesskey sont une methode non aboutie. 

Pour le site Ecoute S'il Pleut, nous l'avons utilisee. 



div. liens { 
background-color: IFFFFEl; 
padding: lOpx; 
color: #312E67; 
text-align: center; 
clear: both; 
font-size: 0.75em; 

} 

div. liens a{ 
color: navy; 

} 

div. liens a:hover{ 
text-decoration: none; 
background-color: navy; 
color: yellow; 

I 

.liens a:after { 

content: "[" attr(accesskey) "]"; 
} 



Ici la technique mise en ceuvre consiste a generer le contenu avec le 
pseudo-element : after. La lettre qui sert de touche d'acces apparait apres 
le lien (voir Figure 6.15). 

<div cl ass="l iens"> 
Accuei 1 

<a href="gites.php" accesskey="B" title="l_es GTtes"x/a> 

<a href="#" accesskey="C" title="Venir"x/a> 

<a href="#" accesskey="D" title="Visites"x/a> 

<a href="#" accesskey="E" title="Notre Projet"x/a> 

<a href="#" accesskey="F" title="Liens amis"x/a> 

<a href="#" accesskey="G" ti tl e="Contact"x/a> 

<a href="#" accesskey="H" title="Les pepinieres"x/a> 

<a href="#" accesskey="I" title="Le Conseil"x/a> 

<a href="#" accesskey="J" title="Nos Partenai res"x/a> 

</di v> 
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< Figure 6.15 : 



Le menu avec les touches 
d'acces sous Firefox 



Visites 




Liens amis 



Contact 



Le lien vers la page courante est desactive (ici c'est la page Accueil) 
tandis que les balises de lien n'ont pas de contenu. Ainsi, sur les 
navigateurs non conformes comme Internet Explorer, seul le titre de la 
page apparait, tandis que sur les autres, ce titre est accompagne des 
touches d'acces entre crochets et soulignees. Ces touches d'acces sont 
explicites et donnent plus de facilite a ceux qui veulent les utiliser. 



L'affichage des elements se fait dans l'ordre oil ils sont cites dans le code 
source. De la meme facon, avec un navigateur audio, les elements sont lus 
au fur et a mesure qu'il decode le code source. L'avantage avec le code 
CSS est qu'il est theoriquement possible de placer les blocs a l'endroit qui 
convient sans se soucier de l'endroit ou ils sont evoques dans le code 
source. Ainsi, l'ecriture du code source peut d'abord prendre en compte 
une hierarchie d'informations et commencer par la plus importante. 



< Figure 6.16 : 



Accueil 



Le menu avec les touches 
d'acces sous Internet Explorer 



6.12 L'ordre de lecture 
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Qu'est-ce qui est le plus important apres tout le contenu d'en-tete ? Le 
visiteur vient chercher le contenu sur une page, le lit, puis cherche des 
liens pour passer a une autre page. C'est pourquoi, il est preferable de 
placer le conteneur div, qui contient le texte de la page, avant l'autre 
conteneur div, qui renferme le contenu de la palette de navigation. 

En attendant que tous les navigateurs soient conformes aux recomman- 
dations, le developpeur peut inserer un lien invisible qui amene le visiteur 
directement au contenu, en court-circuitant les liens de navigation. 

<link rel ="contenu" title="contenu de la page" href="#contenu" /> 

6.13 Les aides 

Les aides sur un site demontrent la volonte du developpeur de preter 
attention aux internautes. 

La page d'aide 

Elle peut expliquer les touches d'acces et les combinaisons de touches 
selon les navigateurs, contenir une FAQ pour aider a l'interactivite, 
afficher la signification des icones presentes sur les pages. Elle evite de 
donner des explications fastidieuses dans les pages courantes, de les 
repeter et de se creuser la tete pour savoir ou les placer. Sur cette page, le 
developpeur a l'opportunite de demander le concours du lecteur pour 
relever les erreurs et faire des suggestions. Elle est un mode d'emploi pour 
expliquer au visiteur la meilleure facon d'exploiter le site. 

La page de Xavier Robin est un exemple de bonnes pratiques pour la page 
d'aide (http://home.etu.unige.ch/~robinO/accessibi 1 i te.html). 
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Edition Affichage Aller a Marque-pages Oudls ? 

U n blog ? Un journal ou on ecrit ses petites reflexions quotidiennes 



Xavier Robin 

DECLARATION 
DACCESSIBILITE 

Standards 

Toutes les pages de ce site sont conforms! MB 
standards mternationaux 

■ XHTML 1 o Strict |9 ou HTML 4 01 
Strict F8 pour le contenu 

■ CSS2 l iff pour la nnse en tonne 

■ Et, autant que possible, WAI l<i pour 
l'accessibilite 

Cela signifie toutes les pages devraient etre 
accessibles avec toils les navigateurs Si cela 
n'etait pas le cas, nierci de m en informer 
inunediatenient 

II est cependant 1 noter que seul les 
navigateurs recents sont capables d'atficher 
les styles C8S3 correctement , ll est done 
possible, si vous utilisez un ancien navigateur, 
que vous ne puissiez pas profiter de tous les 
avantages des standards 

En effet, ee site saffiche nneux avec un 
navigateur conforme aux standards, voici 
pourquoi 



http://home.etLi.unige.ch/^fobriO/WogAidex. xhtml 



© 



Accueil (1) 
Curriculum Vitae 
Blog 

Acoueil 

ATcnives et 

categories 

Fil RSS 
Informatique 

Realisations 

Articles 

Mes logiciels 

preferes 

Pascal 
Mes Hobbies 

Piano 

Kayak 

Lecture 
Navigation 
i Plan du site (3) 
t Accessibilite 
Liens 

Contact (9) 



▲ Figure 6.1 7 : Page a" aide du blog de Xavier Robin 



Les aides invisibles de navigation 

La balise link permet d'inserer dans la page des liens invisibles de 
navigation qui sont, cependant, perfus par les navigateurs audio et 
permettent au besoin de court-circuiter la page. Le developpeur peut faire 
une sorte de circuit de son site pour les personnes handicapees. 

<link rel = "home" ti tle="Accuei 1 " href="http://url/de/l a/page/accuei 1 " /> 
<link rel="prev" title="Titre de la page precedente" 
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href="http://url /de/1 a/page/precedente" /> 
<link rel="next" title="Titre de la page suivante" 
href="http://url /de/1 a/page/sui vante" /> 

6.14 Lapagenue 

La page HTML exploite un certain nombre de technologies d'affichage, 
comme le JavaScript, les CSS. Avez-vous essaye votre site en desactivant 
toutes ces technologies ? Est-il encore possible d'afficher un contenu 
lisible ? Est-il encore possible de naviguer, de valider les formulaires et de 
profiter des differentes fonctionnalites du site ? 

Pour ce qui releve de JavaScript (validation de formulaires, ouverture des 
fenetres...), il est possible de proposer une alternative. 

Le bouton de soumission d'un formulaire ou l'image qui sert de bouton de 
soumission ont une signification alors qu'une balise button avec un 
evenement onCl ick est denuee de tout contexte qui permet de compren- 
dre sa fonctionnalite. 

Une fenetre pop-up peut etre ouverte avec un lien dote d'une propriete 
target="blank". 

L'utilisation d'un navigateur texte met en evidence les incoherences, les 
images sans legende et les liens non explicites. 

6.15 Conclusion 

Un jour, l'accessibilite sera mise en oeuvre systematiquement et tout 
naturellement. Toutes les recommandations seront entrees dans les logi- 
ciels de creation de site web, qui, par defaut, afficheront les balises 
d'accessibilite a integrer. 

Tenir compte de l'accessibilite permet d'appliquer nombre de bonnes 
pratiques, de bonnes habitudes qui changent la maniere de concevoir un 
site et aussi oblige a travailler plus professionnellement. 

Integrer l'accessibilite est une fa5on de montrer la maturite du deve- 
loppeur mais aussi du Web. 
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II peut etre judicieux de refaire un site qui a ete initialement cree sans 
feuille de style. S'il a perdu de son attractivite, avant de perdre ses 
visiteurs fideles et de rebuter les nouveaux, il est urgent d'operer un 
ravalement avant qu'il ne devienne obsolete. 

7.1 Quand operer une refonte d'un site ? 

II existe plusieurs outils pour savoir si le moment est opportun de modifier 
l'apparence d'un site. En general, la refonte visuelle remet en question le 
mode de communication du site et son contenu. Le style du contenu sera 
aussi modifie. Un style visuel tonique appelle des textes plus courts, des 
termes plus directs, une structure plus percutante, plus d'images. La 
decision de refonte s'appuie obligatoirement sur une strategic nouvelle, 
une approche differente de communication avec les internautes. 

Le site Jolies Pages expose des refontes de sites sur 
www. jol iespages.com/pages/OOchangegraphe.php. 
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▲ Figure 7.1 : Jolies pages 
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La baisse de frequentation du site web et la disaffection des internautes 
fideles sont des signaux revelant qu'il est temps de faire le point et de 
monter un nouveau projet. Faire appel a un graphiste sans avoir travaille 
sur le concept du site est peine perdue car le resultat ne sera qu'un 
maquillage ou un cache-misere qui ne ramenera pas les visiteurs. 

II est peut-etre interessant de proceder a un sondage et de lancer un appel 
aux visiteurs pour qu'ils participent au projet. Ensuite, il s'agira de 
communiquer dans la transparence au fur et a mesure de l'avancement du 
projet. II faut un vrai renouveau et non pas un simple changement de look. 

Si les echos des visiteurs du site revelent que le site s'affiche mal avec 
certains navigateurs, il faudra rafraichir l'interface pour qu'elle soit 
compatible. C'est parfois l'opportunite pour faire une vraie refonte du site 
et utiliser eventuellement les feuilles de style. 

Quand un site est congu, il est compose d'un certain nombre de pages et 
de liens de navigation. Ensuite les besoins evoluent, des pages s'ajoutent. 
Parfois le centre d'interet du site se deplace sur un theme qui etait traite 
en peripheric. La refonte du site est alors necessaire pour mettre le 
nouveau theme en avant et clarifier la communication. 

Un site initie par une personne grossit, demande de plus en plus de temps 
pour la mise a jour. Le developpeur des debuts est de plus en plus depasse 
par son projet, qui demande alors a se professionnaliser. La gestion du site 
doit etre confiee a une equipe et les mises a jour rationalisers. C'est le 
moment d'utiliser les CSS et le XHTML, pour qu'il soit possible de 
modifier les pages sans y passer trop de temps. 

Un site peut etre mal reference parce qu'il s'affiche mal ou parce que les 
informations importantes ne sont pas mises en evidence, ou encore parce 
qu'il compte moins de cinq pages. Un site conforme aux directives du 
W3C sera mieux reference car le robot collecteur a la solde des moteur de 
recherche saura ou aller chercher 1' information a indexer. 

7.2 Ou commencer ? 

Deux possibilites s'offrent au candidat a une refonte de site : 

■ Soit il commence par normaliser le site en transformant le HTML en 
XHTML et en esquissant une feuille de style. 
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■ Soit il recommence le site et recupere le contenu une fois la charte 
graphique refaite. 

Pour transformer du HTML en XHTML, il existe des outils comme Tidy. 
Tidy est un nettoyeur de code, mais il ne traite que du code qui n'est pas 
trap sale. Au fur et a mesure des versions, il devient de plus en plus 
complet et peut par exemple verifier si la page repond aux imperatifs de 
l'accessibilite ou nettoyer un fichier web genere par Word 2000. 

Le nettoyage des balises comprend l'ajout de la barre oblique dans la 
balise fermante ou la correction de la balise fermante si elle est mal 
intitulee. Les chevauchements de balises sont rectifies. Des guillemets 
sont ajoutes pour encadrer les valeurs des proprietes. Ce logiciel miracle 
(http: //tidy, sourceforge. net) a bien d'autres fonctionnalites et il est 
souvent implements dans d'autres logiciels, comme HTML Tidy 
(www. f ramasof t . net/art i cl elOlO . html ). 
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HTML Tidy Library Project 

A quorum of developers have pitched in on a SourceForge project 
to maintain and further develop Dave Raooett's excellent HTML 
Tidy program We have two primary goals. First, to provide a 
home where all the patches and fixes that folks contribute can be 
collected and incorporated into the program. Second, a library 
form of Tidy has been created to make it easier to incorporate 
Tidy into other software. 

Table of Contents 

♦ News 

♦ Documentation 

♦ Support 

♦ Executable binaries 

♦ License 

♦ Source code 

♦ Test cases 

♦ Release Process [s. 




■ 


souhchR RGE" 

^net 




Last Modified: 27 February, 2D05 


Tidy User Links 

These links are available to 
anyone to submit a Tidy bug 
report or to view the Tidy 
mailing list archives 

Bug Report > Feature 

Requests 

User List Archives 

Developer List Archives 




Source Forge Projects 

HTML Tidy 


V 


r~* Termine 



▲ Figure 7.2 : Tidy 



Pour finir la transformation, entrez l'URL de vos pages dans le validateur 
du W3C sur http://val idator.w3 .org. 
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Markup Validation Seruj 
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Help & FAQ 



This is the W3C Markup Validation Service, a free 
service that checks Web documents in formats like 
HTML and XHTML for conformance to W3C 
Recommendations and other standards. 



Validate: 



by URL 



by File Upload 
by direct Input 



if you wish to validate specific content such as RSS/Atom feeds or 
CSS stylesheets or to find broken links, there are other validators and 
tools available. 



Validate Your Markup 



Validate by URL 



Address: 



Enter the URL of the page you want to check. Advanced 
options are available from the Extended Interface. 



Validate by File Upload 



Local File: Parcourir... I Check 

Select the file you want to upload and check. Advanced options 
are available from the Extended File Upload Interface. 

P"* Termhe 



▲ Figure 7.3 : Validator 



Une fois que le fichier source a ete transforme en XHTML propre, l'auteur 
peut transposer certaines proprietes dans des selecteurs de la feuille de 
style pour simplifier encore le source. Ensuite une question se pose : 
jusqu'a quel point faut-il transformer le fichier source ? 

7.3 La question des tableaux 

Tous les sites crees sans Flash ou sans feuille de style utilisent des 
tableaux pour structurer leurs pages. Faut-il conserver ces tableaux ou les 
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transformer en conteneurs ? II faut essayer la seconde option car les 
tableaux sont compliques a maintenir des qu'une mise a jour s'impose, 
surtout s'ils sont imbriques. Les feuilles de style, si elles sont bien 
documentees, sont faciles a comprendre car le developpeur a une vue 
generale du code de la page, sans que viennent interferer les details. II 
comprendra tout de suite la philosophic du design et passera moins de 
temps a comprendre la raison de la presence de tel ou tel code. 

7.4 La refonte du site 
photo-de-classe.com 

Le site photo-de-classe.com a ete cree en 1999 sur une idee de Christophe 
Bovio. II l'a congu, realise et maintenu depuis la creation. Ce site, pionnier 
dans son domaine, a ete repris maintes fois depuis. Le concept est le 
suivant : permettre aux internautes de retrouver leurs camarades d'ecole. 
Pour cela, il suffit de s'inscrire et de repertorier son parcours scolaire, 
grace a un formulaire et une liste d'ecoles, de colleges, de lycees, 
d'universites et autres grandes ecoles, mise a jour regulierement. Le site 
n'a pas change depuis ce temps, notamment au niveau de l'interface et des 
fonctionnalites presentees a l'internaute. Christophe Bovio a simplement 
ajoute le concept des "bouteilles a la mer". II s'agit d'un systeme qui 
permet a un membre de lancer un appel a tous les autres membres. Ces 
appels sont envoyes automatiquement selon une periodicite donnee (voir 
Figure 7.4). 

Le site est heberge chez OVH et developpe en PHP3 puis avec la version 4 
et avec une base de donnees MySQL 3.5, qui n'a pas change depuis les 
debuts et qui fonctionne tres bien. 

Les modifications ont porte sur la maintenance car le serveur subit une 
charge de plus en plus forte au fur et a mesure de F affluence des 
internautes, suite a des passages a la television et des articles dans des 
magazines a grand tirage. Tout le travail au cours des annees passees a ete 
d'ameliorer le back-office, c'est-a-dire les interfaces, pour administrer le 
site et declencher les evenements. Pour reduire la charge du serveur, il a 
fallu aussi gerer le cache, modifier les applications gourmandes en 
microprocesseur et alleger le code. Christophe s'est rendu compte que la 



682 • Double Poche CSS 



La refonte du site photo-de-classe.com 



moitie du code seulement etait vraiment utile et que de nombreuses lignes 
etait devolues a des tables imbriquees qui rendaient le source illisible (voir 
Figure 7.5). 
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□ Firefox a empeche ce site d'ouvrir une fenetre popup. 




1 ":iiriui=c-in l 



dentifisnt| 
not de \~ 



E9 

Mot da passe oufalie? 



2 304 416 anciens copains aujourd'hui sur 
photo -de-classe 



0 Accueil 

0 Votre Reclierche 

0 Bouteilles a la mer 
Q Inscrivez-vous 

0 Photo la plus ancienne 1876 

0 Voyage dans le temps 

Q On patle de photo de classe 

0 Aide 

0 Apportez vcs temoignages 
0 Contactez le webmaster 



EEEZE 



"Pionnier des 1999 sur le net, photo de 
classe est leader en France pour retrouver 
GRATUITEMENT photos de classe et 
anciens copains Gere sur mon temps libre, 
ma motivation vient des tenioiqnaqes La 
pub et les services facultatifs de la hotline et 
des bouteilles a la mer financent les couts ' 




ARRAGAIN michelle 



Sons souvenirs a tovs Chiisiophe, vtecmaste). 



Retrouver ou etre retrouve ? 
INSCRIVEZ-VOUS 




lection des actualites d 



• Logiciels coups de cceur de la sernaine 

• Xbox Live Gold gratuit pour ce week-end 

• StarForce : le casseurcasse 

• iTunes menace par les Beatles ? 

• Nouveau type d'atiaque bancaire sur Internet 

• Scndage : quand pensez-vous que la PS3 sortira ? 

• Quand les spammeurs deviennent poetes 

• Du piratage sur YouTube ? 

• La conservation des donnees ne plait pas aux FAI 

• Rumeurs d'une Revolution 

• Les spywares en prison 

• Revente de comptes bancaires sur Internet 
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Figure 7.4: Photo-de-classe.com avant 
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▲ Figure 7.5: Photo-de-classe.com apres 

Christophe Bovio a fait appel a une graphiste qui a completement rafraichi 
1' aspect du site en gardant une charte proche de 1' original. Le site puise 
dans l'univers BD pour parler a son public. 




▲ Figure 7.6: Univers BD 
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Le choix des CSS s'est impose pour plusieurs raisons : 

■ alleger le code pour le maintenir plus facilement des qu'il s'agit de 
faire une modification ; 

■ reduire la bande passante consommee, avec un code allege ; 

■ adapter plus aisement la presentation aux principales celebrations de 
l'annee ; 

■ rendre le site accessible a tous ; 

■ etre mieux reference dans les moteurs de recherche car si le deve- 
loppeur recherche le code utile, il en est de meme des moteurs de 
recherche, qui ecument les sites afin d'en extraire V information utile. 

La mise en CSS a confronte Christophe a quelques soucis. Le chemin 
entre le graphisme et la mise en (X)HTML et en CSS est seme d' obstacles, 
surtout s'il faut disposer de nombreuses boites dans la page et que tout 
s'affiche quelle que soit la definition d'ecran. 

Un petit graphisme sympathique se devoile progressivement sur les ecrans 
ayant une resolution au-dela de 800 x 600 pixels. Le site est centre sur un 
fond uni bleu mauve (#669) et construit sur des mesures precises. 




▲ Figure 7.7 : Dessins caches 



Parfois, la construction d'un site ressemble a l'edification d'un chateau de 
cartes : vous posez les cartes de plus en plus haut, vous ajoutez la derniere 
carte et la fragile construction s'ecroule. La difficulte augmente potentiel- 
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lement selon le nombre de boites imbriquees, puis la fragilite du tout 
augmente avec 1' interpretation de chaque navigateur. 

Dans son site, Christophe propose une navigation par onglets. Ces onglets 
sont faits selon la methode des portes coulissantes creee par Douglas 
Bowman (http: //pornpage.net/pompe/portescoul i ssantes/). 
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Les Portes Coulissantes de CSS 

Par Douglas BtWWB 



Un des avantages de C^«raretT 
capacite de superposer des ima< 



lent evoque est la 
capacite de superposer des images d'arriere-plan, 
permettant de glisser Tune par-dessus I' autre pour creer 
certains effets. CSS2 en I'etat requiert un element HTML 
distinct pour chaque image de fond. Dans de nombreux 
caSj le balisage type pour des composants d'interface 
courants nous fournit deja plusieurs elements a utiliser. 

L'un de ces cas est la navigation par onglets. Les onglets 
jouissent d'une popularity grandissante en tant que 
moyen de navigation primaire, et il est temps d'en 
reprendre le controle. Maintenant que CSS est largement 
supporte, nous pouvons ameliorer la qualite et 
I'apparence des onglets sur nos sites. Vous savez 
probablement que CSS peut Stre utilise pour appnvoiser 
une simple liste non ordonnee m . Vous avez peut-etre 
meme deja vu des listes habillees comme des onglets, 
ressemblant a quelque chose comme geci : 



News 



Products 



Et si on pouvait prendre le balisage exact tel qu'utilise 
pour les onglets ci-dessus, et les transformer en quelque 
chose comme geci : 

Home 1 News I Products 



[*~* Termine 



Web design puise a la ionce 

POMPAGE 



Article original : Sliding Doors of 



Date de partition : 20 octobre 
2003 



Date de traduction : janvier 

2004 



A propos lie Tauteur 



Fondateur et manager de 
Stopdesi g n , Douglas Bowman 
est un specialiste du design 
simple, propre, et tourne vers 
I'aventr. Il repousse en 
permanence les limites du 
possible en matiere d'utilisation 
des standards web. Douglas a 
ete le grand architecte de la 
fameuse refonte de 

■ en 2003, mais il promet 
de ne pas se reposer sur ces 
lauriers pendant trop 
longtemps. 



▲ Figure 7.8 : Pompage.net 



Le nouveau site est beau et sympathique, avec une pointe d' humour qui 
cree un climat de complicite entre tous les membres inscrits (gratuitement) 
ou meme les simples visiteurs. Le fond blanc et la decoupe claire des 
differentes rubriques en page d'accueil creent un espace bien structure, ou 
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la navigation est aisee. Les arrondis des boites, les sourires des enfants 
farceurs et le sourire franc et plein d' humour de ranimateur-webmaster- 
developpeur sont engageants. Un nouvel arrivant sera tente de s'inscrire 
en toute transparence. 




< Figure 7.9 : 

Petit personnage 



Pour que le site garde sa marque de fabrique, la couleur mauve dominante 
est reconduite et la photo du webmaster est la pour assurer la continuite. 
L'esprit de ce site se poursuit et la photo du webmaster atteste de la 
transparence et de l'efhique que photo-de-classe.com a su garder et 
auxquelles s'est engage Christophe Bovio. 

devolution du site 

La feuille de style de photo-de-classe.com a beaucoup evolue entre les 
deux moutures du site. La premiere feuille de style a permis d'enlever les 
indications de forme a l'interieur du HTML et de les reporter dans la 
feuille de style. Tout est insere dans des tables sans que des boites soient 
veritablement positionnees. 

L'une des premieres actions a effectuer est de reporter dans une feuille de 
style les indications de forme inserees dans le code HTML. Voici une 
partie du code : 



input { 
font: 


8pt Arial , 


hel veti ca, 


sans-seri f 


} 

select { 
font: 


8pt Arial , 


hel veti ca, 


sans-serif 


} 

textarea 
font: 


{ 

8pt Arial , 


hel veti ca, 


sans-seri f 


} 

button { 
font: 

} 


8pt Arial , 


hel veti ca, 


sans-seri f 


a { 
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color: #000000 

} 

a:hover { 

color: #666699 

} 

a. black { 

color: #000000 

} 

a.black:hover { 
color: #CCCCFF 

} 

a.blackBold { 

font: bold 8pt Ari al ,hel vetica,sans-seri f ; 

} 

a.blackBold:hover { 

font: bold 8pt Ari al ,hel veti ca,sans-seri f ; 

} 

a. white { 

color: #FFFFFF; text-decoration: none; 

} 

a.white:hover { 

color: #CCCCFF; text-decoration: none; 

} 

a. promo { 

font: 8pt Arial, helvetica, sans-serif; color: #000000; 
text-decoration: none; 

} 

a. promo: hover { 
color: #666699; 

} 

a.y { 

font: 8pt Arial, helvetica, sans-serif; color: #000000; 
text-decoration: none; 

} 

a.y:hover { 

color: #666699; 

} 

a. invisible { 

text-decoration: none; 

} 

a.invisible:hover { 

text-decoration: none; 

} 

a.bouton { 

font: 9pt Arial .helvetica, sans-serif ; 
color: #000000; 
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background-color: #CDCBFC; 
text-decoration: none; 
text-align: center; 
padding: 5px; 

border: 2px outset #ffffff; 



a.bouton:hover { 
color: gray; 

background-color: #CDCBFC; 
border: 2px inset #ffffff; 



a.nbinscrits { 

font: bold 9pt Ari al ,hel vetica,sans-seri f ; color: IFFFFFF; 

} 

input. form { 

background-color: Iccccff; font: 8pt Arial, helvetica, 
sans-serif; 

} 

textarea.form { 

background-color: Iffffff; font: 8pt Arial, helvetica, 
sans-serif; 

} 

select. form { 

border-right: #c2c3c2 lpx solid; 
border-top: #c2c3c2 lpx solid; 
border-left: #c2c3c2 lpx solid; 
border-bottom: #c2c3c2 lpx solid; 
background-color: #ccccff 

} 

checkbox. form { 

border-right: #c2c3c2 lpx solid; 
border-top: #c2c3c2 lpx solid; 
border-left: #c2c3c2 lpx solid; 
border-bottom: #c2c3c2 lpx solid; 
background-color: #ccccff 

} 

td.invert_header { 

font: bold 8pt Ari al ,hel vetica,sans-seri f ; 
color: #FFFFFF; 
background-color: #666699; 

} 

td .GrosHeader { 

font: bold 12pt Arial .helvetica, sans-serif ; 
color: #000000; 
background-color: #CCCCFF; 
text-align: center 
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td.NavigationPages { 

font: 8pt Arial .helvetica, sans-serif ; 
color: #000000; 
background-color: #CCCCFF; 
text-align: center 

} 

td.text { 

font: 8pt Arial .helvetica, sans-serif ; 
color: #000000; 
background-color: #ccccff 



0 Accueil 

0 Votie Recherche 

0 Bouteiljres a la mer 
0 lnscriv&3ous 

0 Photo la plus ancienne 1876 

0 Voyage dans le temps 

0 On parle de photo de classe 

0 Aide 

0 Apportez vos temoignages 
0 Contactez le webmaster 



< Figure 7.10 

Liens 



Dans le nouveau site, les compteurs sont tout de suite remis a 0 pour 
effacer les reglages par defaut des navigateurs. 

html , body { 
padding: 0; 
margin: 0; 

background-color: #666699; 

font: 9px verdana, arial , sans-serif ; 

height: 100% 

} 

* {margin:0; padding:0;} 

Le parti est pris de superposer les fonds pour un devoilement progressif 
des differents motifs qui les constituent. 
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^************************************************************* 
Systeme de fonds superposes masquables 

************************************************************** 
#page { 

background: url (page_bg_motif.gif) repeat-y center center;} 
#page_pifpaf { 

background: url (page_bg_pifpaf.gif) no-repeat center top;} 
#page_780 { 

background-color: #FFFFFF; 
width: 780px; 
margin: Opx auto; 

} 




▲ Figure 7.11 : Image de fond bandeau _p2c_annees70.gif 



^************************************************************* 
Header avec pub 468 x 60 

************************************************************** / 
#page_780_header { 

background: url (/images/bandeau_p2c_annees70.gi f ) #FFFFFF 

no-repeat center top; width: 780px; height: 245px;} 

#bandeau_468_60 { 

position: absolute; 

margin-top: 27px; 

margin-left: 301px; 

float: right; 

width: 468px; 

height: 60px; 

} 

#page_780_header_light { 

background: url (/images/bandeau_p2c_l ight.gif) #FFFFFF 
no-repeat center top; 
width: 780px; 
height: 113px; 

} 

L'en-tete est place en position absolue et tout est trace au cordeau. Le pied 
de page est declare juste apres. 
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^************************************************************* 
Pied de page simple 

*********************************************** 

#page_780_footer { 
clear: both; 

background: url (/images/page_footer.gi f) 
no-repeat center bottom; 
width: 780px; 
height: 45px; 

} 

#page_780_footer img { 

display: inline; 

verti cal -al ign: middle; 

} 

#page_780_footer p { 
position: absolute; 
margin-top: 4px; 
margin-left: lOpx; 
margin-right: lOpx; 
font-size: 9px; 
color: #FFFFFF; 
text-align: left; 
} 

#page_780_footer p a { 
color: IFFFFFF; 
text-decoration: none; 

} 

▲ Figure 7.12: lmagedefondpageJooter.gif 

Sous l'en-tete, se deroule le menu a onglets, puis se deploie une table a 
deux colonnes et deux lignes. 




< Figure 7.13 : 

Table avec la 
classe de chaque 
colonne et ligne 
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Pour le menu horizontal, la structure choisie, comme dans la plupart des 
cas, est celle des listes non ordonnees sans puce. 

<LIxa href="/ a ctus .php" onMouseover="expandcontent ( ' sc6 ' ) "> 

<span>Medias</spanx/a> 

</LI> 

La partie du code source s'y referant pour les sous-menus est la suivante : 

<div id="sc6" cl ass="submenubarcontentR"> 
<a href="/recommander.php" 

title="Merci de contribuer a faire connaTtre mon site"> 
Faire connaitre ce site</a> 

<a href =" /actus . php?medi a=tv">Tel evi si on</a> 

<a href = "/actus . php?medi a=radi o">Radi o</a> 

<a href="/ ac tus .php?medi a=magazi ne">Magazi nes</a> 

<a href="/ actus .php?medi a=quotidien">Quoti diens</a> 

<a href="/ actu s .php?medi a=web">Internet</a> 

<!--<a href ="#">Acces journal i stes</a> --> 
</div> 

Le code dans la feuille de style concernant le menu est plus complexe. 

^************************************************************* 
Barre de menus horizontale 

************************************************************** / 
Imenuhor { 

position: relative; 

height: 33px; 

width: 770px; 

background-color: transparent; 
margin-top: -lOpx; 



Imenuhor ul { 

padding-right: lOpx; 
padding-left: lOpx; 
padding-bottom: Opx; 
margin: Opx; 
padding-top: lOpx; 
list-style-type: none; 



Imenuhor li { 

display: inline; 
padding-right: 0; 
margin: 0; 
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} 

Imenuhor a { 

padding-right: Opx; 
padding-left: 9px; 

background: url (/images/1 eft_both.gif) 
no-repeat left bottom; 

background-position: Opx -127px; 
float: left; 
padding-bottom: Opx; 
margin: Opx; 
padding-top: Opx; 
text-decoration: none; 
margin-right: 3.5px; 

} 

Imenuhor a span { 

padding-right: 15px; 
display: block; 
padding-left: 6px; 

background: url (/images/right_both.gif) 
no-repeat right bottom; 

background-position: 100% -126px; 

float: left; 

padding-bottom: 4px; 

font-size: 12px; 

font-weight: bold; 

color: IFFFFFF; 

padding-top: 5px; 

} 

Imenuhor a span { 
float: none; 

} 

Imenuhor a:hover span { 
color: IFFFFFF; 

} 

Imenuhor #current a { 

background-position: Opx -275px; 

} 

Imenuhor #current a span { 

background-position: 100% -275px; 
color: IFFFFFF; 

} 

Imenuhor a: hover { 

background-position: 0% -275px 
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} 

Imenuhor a:hover span { 

background-position: 100% -275px 

} 

^************************************************************* 

Barre de menus horizontale : catch entree/sortie dans la barre 
************************************************************** / 

Imouseouttop 
{ 

position: relative; 
height: 5px; 

z-index: 100; /* pour un passage assure */ 



Imouseoutbottom 
{ 

position: relative; 
height: 5px; 

z-index: 100; /* pour un passage assure */ 



y************************************************************* 
Barre de menus horizontale : sous-menus 

************************************************************** 

Isubmenubar 

{ 

background-color: IFFFFFF; 
position: relative; 
height: 30px; 



. submenubarcontentR{ 
di spl ay :none; 
margin-right: 24px; 
margin-left: 4px; 
margin-top: 6px; 
text-align: right; 



. submenubarcontentl_{ 
di spl ay :none; 
margin-right: 4px; 
margin-left: llpx; 
margin-top: 6px; 
text-align: left; 
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. submenubarcontentbandeau { 
di spl ay :none; 
margin-right: 24px; 
margin-left: 16px; 
margin-top: 6px; 
text-align: left; 



. submenubarcontentR a:link, . submenubarcontentR a:visited, 
. submenubarcontentL a:link, . submenubarcontentL a:visited ( 

text-decoration: none; 

padding-left: 4px; 

padding-right: 4px; 

border-right: lpx solid #000000; 

font-size: lOpx; 

font-weight: bold; 

color: #110805; 



.submenubarcontentR a:hover, .submenubarcontentL a:hover{ 
color: #FF6600; 

} 

^****************** *************************** **************** 

Zone de messages : actualites, infos, astuces, etc. 
************************************************************** 

.bandeautxt { 

font-size: lOpx; 
font-weight: bold; 
color: #655755; 
margin-right: 5px; 



.bandeautxt span { 
color: #404069; 
padding-left: 5px; 
padding-right: 5px; 
border-bottom: lpx solid black; 



.bandeautxt a:link, .bandeautxt a:visited { 
font-size: lOpx; 
font-weight: bold; 
color: #FF6600; 
text-decoration: none; 
margin: 2px lOpx 2px 2px; 
border: none; 
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.bandeautxt a:hover { 
color: #655755; 

} 



Plusieurs fichiers JavaScript sont ajoutes pour permettre le deploiement de 
tous les menus au passage de la souris. 

<link rel="stylesheet" type="text/css" 
href="/images/styl es_bandeau_p2c. ess" 
media="screen, projection, print, tv" /> 

<script src="js/bandeautxt. js" type="text/javascript" 

1 anguage=" javascri pt"x/scri pt> 
<script src="js/submenu. js" type="text/javascript" 

1 anguage=" javascri pt"x/scri pt> 
<script src="js/boutei 1 1 es . js" type="text/javascript" 

1 anguage=" javascri pt"x/scri pt> 
<script src="js/468rotate. js" type="text/javascript" 

1 anguage=" javascri pt"x/scri pt> 
<script src="js/uti 1 s . js" type="text/javascri pt" 

1 anguage=" javascri pt"x/scri pt> 



<link rel ="shortcut icon" type="image/bmp" 

href ="http: //www. photo-de-cl asse.com:8888/favi con. i co" /> 



Voici le code pour les elements de formulaire. 




Deia inscrit ? 

Identifiant : | 



^otde passe : | 

► codes oublies ? 0m 



< Figure 7.14 : 

Formulaire 
d' inscription 



Elements de formulaire 

************************************************************** 

form.inscrits { 
margin: 0; 
padding: 0; 
width: 195px; 
line-height: 100%; 

} 

.inscrits label { 
color: #110605; 
width: 80px; 
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float: left; 

} 

.inscrits input. type_text, .recherche input. type_text { 
background-color: #CCCCFF; 
border-top: lpx #110B05 solid; 
border-left: lpx #110B05 solid; 
border-right: lpx #FFFFFF solid; 
border-bottom: lpx IFFFFFF solid; 
font-size: 9px; 
color: #110B05; 
width: 80px; 
/*height: 16px;*/ 

} 

.bouton { 

border: 2px solid #343441; 
border-top-color: IFFFFFF; 
border-left-color: IFFFFFF; 
background-color: #CCCCFF; 
color: #655755; 
font-size: lOpx; 

} 

.bouton:hover { 
color: #6363A0; 
border: lpx inset #74747F; 

} 

Voici une partie du code source : 
<div id=blockl_> 

<DIV class=boite><DIV class="boite_br"><DIV cl ass="boi te_tl " 
<DI V class="boite_tr"> 

<div cl ass="pi cto_gd"ximg src="images/picto_inscrit.gif" 
width="65" height="67" alt="" /></div> 
<div cl ass="col onne"> 

<div class="titreBleu">Deja inscrit ?</div> 

<form cl ass="i nscri ts" name="identification_form" 

action="/nescl asses. php" method="post"> 

<input type="hidden" name="identification" value="oui" /> 

<label for="identifiant">Identifiant : </label> 

<input cl ass="type_text" i d=" i dent i f i ant " 

name="identification_login" type="text" size="10" 

maxl ength="80" /> 

<br /> 

<label for="password">Mot de passe : </label> 
<input cl ass="type_text" id="password" 
name="identi f ication_password" type=" pas sword" 
size="10" maxl ength="80" />  

<input cl ass="bouton" type="submit" name="0K" value="0K" /> 

<br /> 
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<div cl ass="spacer"> </div> 

<ul cl ass="inl ine"xl i class="inl ine"> 

<a class="soft" href="/pe r te_mai 1 .php"> 

codes oubl iés ?</a> 
</l ix/ul>  

<input type="checkbox" name="memocodes" value="l" checked /> 
memori ser 
</form> 
</di v> 

</DIVx/DIVx/DIVx/DIV> 
</div> 

Voici maintenant le code CSS qui permet d'avoir les boites a coins 
arrondis. 

^************************************************************* 
Boites a coins arrondis 

************************************************************** / 
.boite { 

background: url (/images/round_bl .png) no-repeat left bottom; 

width: 289px; 

} 

. boite_br { 

background: url (/images/round_br.png) no-repeat right bottom 

} 

.boite_tl { 

background: url (/images/round_tl .png) no-repeat left top 

} 

.boite_tr { 
padding: 5px; 

background: url (/images/round_tr.png) no-repeat right top; 
} 

.colonne { 
margin-left: 75px; 

} 

Plusieurs boites sont superposees pour accueillir chacune un coin arrondi. 
Le contenu des differentes rubriques est dispose dans des boites flottantes. 

^************************************************************* 
Placement des divers pictos et photos 

**************************************************************y 

.picto { 
float: left; 
display: block; 
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width: 40px; 




text-al ign: 


center; 


margin: 4px; 




margin-top: 

} 


2px; 



Les tableaux de donnees ne sont pas bannis, mais ils sont faits proprement 
afin de faciliter la tache des navigateurs audio. II faut eviter d'etre 
orthodoxe et de tomber dans l'exces qui consiste a n'utiliser que des boites 
di v positionnees en CSS. II est preferable de s' adapter pour avoir un beau 
site sans probleme. 

Quelles que soient les options, elles demandent une grande coherence. Ici 
c'est le cas. Les boites header et footer sont en position absolue, la boite 
principale en position relative, puis les rubriques en position flottante. 
Tout se tient : de l'option de depart decoulent les autres options, meme si 
chaque createur garde une certaine liberie au fur et a mesure de 
F edification du site et de son architecture. 

La refonte d'un site peut etre longue. II est prudent de ne pas annoncer de 
date dans un repertoire du site avant que le travail ne soit acheve. Mais 
une fois la mise en CSS realisee, les refontes suivantes sont plus simples 
a mettre en place car souvent, elles ne concernent que des elements 
graphiques remis au gout du jour et inseres dans Farchitecture originelle. 
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Le futur des feuilles de style est la norme CSS3. La feuille de style a 
desormais des possibilites qui la rapprocheront de la PAO et done du 
papier. 

Tous les bricolages et bidouillages necessaires jusqu'a present pour 
ameliorer le rendu des CSS ne sont plus necessaires car la CSS3 les 
incorpore. Plus besoin de se creuser la tete pour avoir un affichage 
homogene des boites sous forme de colonnes, plus besoin de creer des 
images speciales pour arrondir les angles ! 

La CSS3 est vraiment la version qui mene la CSS a la maturite. II reste 
maintenant aux navigateurs a se conformer a cette norme en integrant les 
recommandations du W3C. 

Les differentes fonctionnalites implementees rendent le developpement 
des CSS plus intuitif, ce qui devrait plaire aux graphistes qui n'aiment pas 
passer trop de temps a developper, et laisser plus de place a la creation. 

8.1 Placer des boites 



Placer des boites devient une tache naturelle et simple grace au concept de 
modele (template). Ainsi une page classique se fait facilement. 



@media all 




{ 

body { display: 


'aaa" 




bed" } 


#head { position 


: a } 


#nav { position: 


b } 


#adv { position: 


c } 


#body { position 


: d } 


} 
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▲ Figure 8.1 : Resultat 



@media all and (max-width: 500px) 

{ 

body { display: "a" 
"b" 
■C" } 

fhead { position: a } 
#nav { position: b } 
#adv { display: none } 
fbody { position: c } 
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h e £i cl 






#body 




l Figure 8.2 : Resultat 



Ici, avec la propriete di spl ay_model , il devient possible de creer un 
modele qui donne la disposition des differentes boites. Chaque boite est 
figuree par une lettre. Dans l'exemple precedent, les boites sont alignees 
verticalement. 



<style type="text/css"> 
body { 
height: 100%; 



a 


b.c" 


(2em) 






(lem) 


d 


e.f" 








(lem) 


9 


h.i" 


(2em) 
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5em lem * lem 10em} 
#logo {position: a} 
ftnotto {position: b} 
#date {position: c} 
#nav {position: d} 
#main {position: e} 
#adv {position: f} 
#copy {position: g} 
#about {position: h} 
</styl e> 

<p id=logoximg src=... 

<p id=motto>Making Web pages since 1862 

<p id=date>August 2, 2004 



#logo 




#motto 


#date 


#nav 


fmain 


#adv 


#copy 


#about ^| 




▲ Figure 8.3 : 


Resulted 



Les lettres represented une boite, les points un espace. De cette fagon, la 
page est presque dessinee par la disposition de ces caracteres. Dans cet 
exemple, la page est composee de trois rangs et de trois colonnes, separes 
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par un espace blanc de 1 em. Le rang et la colonne du milieu ne sont pas 
definis ou definis par un asterisque, ce qui les rend flexibles au niveau de 
leurs proportions. Les mesures, a la fin de la propriete di spl ay, donnent 
la largeur de chaque colonne, la premiere de 5 em et la derniere de 10 em. 

II est facile aussi d'utiliser des onglets. 

<style type="text/css"> 

body {background: silver; color: black} 
div. records {display: stack; border: outset} 
div. record {display: card} 

h2 {display: tab; width: 5em; border: outset; 

text-align: center} 
h2:current {border-bottom: solid silver} 
</styl e> 

<div cl ass=records> 
<div class=record> 
<h2>Men's fashion</h2> 
<ul> 

<1 i>0versized jeans, 4 pockets. 

<li>... 
<ul> 
</di v> 

<div class=record> 

<h2>Women's fashion</h2> 

</div> 

<div cl ass=record> 
<h2>Chi 1 dren ' s fashion</h2> 

</div> 
</di v> 

Les boites ont la possibilite d' avoir des coins arrondis et une ombre, que 
Ton ne peut obtenir actuellement que par du bidouillage de code. 

div .nouvelles{ 
border: thin solid; 
box-shadow: 0.2em 0.2em #CCC; 
border-radius: lem; 

} 

box-shadow donne les distances par rapport a la boite, horizontale et 
verticale. 
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Lorem ipsum dolor sit amet. consectetuer adipiscing elit Suspendisse mollis . 
lorem non ipsum viverra vehicula. Curabitur eu sem. Fusee nec sem el nunc 
mollis luctus. Pellentesque vestibulum eros eget felis. Donee fringilla turpis quis 
urna. Vivamus fermentum consequat nulla. Morbi sit amet nunc in lacus 
sodales molestie Pellentesque habitant morbi tristique senectus et netus et 
malesuada fames ac turpis egestas. Vestibulum in odio eget libero rutrum 
venenatis Mauris quis ore). 

Aenean eget magna ut nibh commodo porta. Pellentesque habitant morbi 
tristique senectus et netus et malesuada fames ac turpis egestas Prom laoreet 
ante at lorem. Donee justo. Quisque in lacus nec mi rhoncus feugiat. Duis in 
ligula ut urna adipiscing cursus. Nullam vestibulum viverra diam. Lorem ipsum 
dolor sit amet. consectetuer adipiscing elit. Nulla quis neque. Aliquam dapibus. 
velit quis sagittis ultrices, lectus felis fermentum velit, in ultricies est nisi at 
sapien. Cras ligula tortor, facilisis ac. consequat at. vehicula et, ipsum. Fusee 
mollis, metus quis placerat tristique. urna nisi placerat arcu. vitae eleifend mi 
ipsum at nulla Donee pellentesque tortor et velit 

Ut est lorem. condimentum ut, mattis nec, egestas scelerisque, eros. Lorem 
ipsum dolor sit amet. consectetuer adipiscing elit Sed at mi Donee fringilla 
ligula eu sem Nam eget sem et urna congue venenatis Nullam eu diam. 
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac 
turpis egestas Donee quis neque id orci fermentum rutrum Morbi interdum orci 
et augue. Nullam id nulla Vivamus id justo vitae tortor placerat faucibus. 
Praesent ac justo ac elit fringilla dictum. Etiam pulvinar. Curabitur vel nisi. 
Vestibulum ullamcorper enim quis nisi. Sed ornare. 

Duis ultricies. Aenean elementum molestie magna. Aenean tempus justo quis 
quam. Maecenas sagittis dictum dui. Cras nec lacus a tellus lacinia fermentum. 

' 



▲ Figure 8.4: Boite ambree a bords arrondis 



8.2 Autres caracteristiques 
Les couleurs 

II est possible de representer les couleurs avec le systeme de codage HSL 
{Hue, Saturation, Luminance, ou TSL en francais pour Teinte, Saturation, 
Luminance). Ici encore, e'est une maniere plus intuitive de definir une 
couleur, en l'eclaircissant, en lui donnant plus de profondeur, etc. 
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La propriete transparency permet de definir une transparence deO.O 
(transparent) a 1 . 0 (opaque). Les systemes de codage de couleurs comme 
RGB ou HSL deviennent RGBA ou HSLA (A pour Alpha). 

p { color: hsla(240, 100%, 50%, 0.5) } /* bleu semi -transparent */ 

Le son 

Les caracteristiques du discours pour les navigateurs audio sont definies 
par diverses proprietes pour le type de voix, le debit du discours, le temps 
des pauses. 



hi, h2, h3, h4, h5, h6 { 




voice-family: paul ; 




voice-stress: moderate; 




cue-before: url (ping.au) 




} 

p.heidi { voice-balance: left; voice-family: 


female } 


p. peter { voice-balance: right; voice-family 


male ) 


p. goat { voice-volume: soft } 






< Figure 8.5 : 

Oreille 



Les empreintes de voix sont comme les polices de caracteres, elles portent 
un nom : paul, female, male, etc. La voix paul a une accentuation 
moderee avec un jingle qui l'introduit, comme les annonces de gare. La 
voix de femme des paragraphes de classe heidi vient de la gauche et la 
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voix d'homme des paragraphes de classe peter vient de la droite tandis 
que les paragraphes de la classe goat ont une voix douce. 

Les polices 

Un certain nombre de caracteristiques etudiees pour la CSS3 concernent 
les polices et la maniere de les afficher. font-size-adjust est une 
caracteristique qui rapproche les CSS de la PAO avec la meme precision. 
Si la police de caracteres demandee n'est pas presente sur la machine de 
l'internaute, une autre police est utilisee ; la difference de taille pour le 
meme corps est compensee : il s'agit de s'ajuster a la taille du caractere 
prevue. 

L' interpretation progressive {progressive rendering) est un processus qui 
consiste en un rendu temporaire des polices en attendant qu'elles soient 
chargees (a la facon des images). Une fois le chargement depuis le Web 
opere, la vraie police remplace le rendu temporaire sans qu'il soit 
necessaire de recharger la page. 

Les fonds 

La propriete background-break permet de faire courir une image de fond 
sur toute une boite, eventuellement des boites interieures, ou de repeter 
cette image a l'identique sur des boites interieures. II est possible de 
mettre comme fond plusieurs images dans la meme boite. 

Les proprietes background-clip et background-origin donne le point 
de depart de l'image. Cette derniere peut etre etendue sur toute la page si 
elle est plus petite que la page en question, ou etendue jusqu'aux bordures 
avec un effet de relief, ou repetee avec un espace separateur modulable. 

8.3 Conclusion 

Ces recommandations du W3C sont de plus en plus appliquees. 

A l'heure actuelle (fevrier 2009), un certain nombre de navigateurs sont 
compatibles CSS3 et obtiennent un resultat satisfaisant au test Acid3 
(http://acid3.acidtests.org/) : 

■ Firefox 3.2al (Gecko/20090119) : 93/100 
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■ Opera 10.0 alpha 1 : 100/100 

■ Safari 4 Developper Preview : 100/100 

■ Konqueror snapshot r8 16030 : 73/100 

■ WebKit (moteur JavaScript V8 de Google Chrome) : 100/100 

■ Internet Explorer 8 RC1 : 21/100 

Microsoft freine l'essor du CSS3 a dessein mais cette strategie pourrait se 
retourner contre eux dans la mesure oil les CSS3 vont se repandre sur le 
web. Si de gros sites adoptent la CSS3 en demandant a leurs visiteurs de 
telecharger Opera ou Firefox dont l'utilisation monte — on le voit dans les 
statistiques des sites — , alors Microsoft sera oblige d' adopter les 
recommandations de W3C. 

Les developpeurs ont interet a inserer du CSS3 peu a peu sur leurs sites 
pour etre prets au moment venu. II est toujours possible de creer deux 
feuilles de styles et d'orienter les visiteurs sur l'une ou l'autre selon la 
version de leur navigateur mais cela oblige a developper deux fois, merci 
Microsoft ! 
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Les CSS se marient bien avec le XML, le JavaScript, AJAX (Asynchro- 
nous JavaScript And XML, ou XML et JavaScript asynchrones), les 
langages dynamiques de script comme PHP ou ASP. Ces langages 
compensent les manques des CSS ou les incompatibilites des differents 
navigateurs, ou encore renforcent et multiplient les possibilites des CSS. 
Internet marie bien les langages differents sur une meme page, meme si 
parfois ce code heterogene est plus difficile a maintenir ou meme a relire. 

Ce chapitre va d'abord presenter ces differents langages, afin que vous 
puissiez en assimiler quelques notions, puis differentes manieres de 
compenser les manques des CSS ou d'en ameliorer les fonctionnalites. 
Parfois ce sont d'ailleurs les CSS qui ameliorent ces langages ! 

Plus le developpeur utilise de langages differents, plus il a interet a bien 
documenter son code, en particulier sur la page elle-meme, avec des 
commentaires, des lignes de separation, des lignes blanches. 

Le langage JavaScript est le plus souvent utilise car c'est le plus souple 
puisqu'il est execute par le navigateur lui-meme. Le navigateur possede 
un moteur JavaScript qui fait tourner le script detecte dans le langage 
source. Ce processus evite de recharger la page pour operer un change- 
ment. AJAX l'exploite au mieux en le mariant aussi au XML. 

9.1 Le JavaScript 

Le JavaScript est un langage de script cote client principalement, 
c'est-a-dire que le code est execute par le client, le navigateur lui-meme, 
en temps reel. Vous pouvez y acceder en affichant le source de la page au 
moyen de votre navigateur. Le JavaScript se place au milieu du code 
HTML entre les balises <SCRIPT> et </SCRIPT>. Un certain nombre de 
langages de script sont executes par le serveur, comme le PHP, V ASP, etc. 
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Figure 9.1 : PHP 



Cote client, cote serveur 

Imaginez que le serveur dans un cafe prepare vos consom- 
mations et charge votre commande sur un plateau. Vous, en tant 
que client, vous prenez votre cafe et vous ajoutez un sucre. Vous n'etes 
pas oblige de mettre le sucre mais ce sucre est la au besoin. Le serveur 
web va executer les commandes qui lui sont destinees (code PHP, 
ASP...) puis presenter la page web demandee sur un navigateur. Le 
client est le navigateur web qui affiche une page web placee sur le 
serveur. Certaines lignes de code (HTML) lui donnent les directives 
pour presenter la page. Ainsi les liens seront soulignes, les images 
placees a tel ou tel endroit. En plus du HTML, la page sera enrichie de 
lignes de code JavaScript. Ce code sera charge en memoire vive en 
attente d'un evenement qui declenchera son execution (le passage de 
la souris, un die, une touche enfoncee...). 
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NAVIOATEUR 



iW execute 
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PAGE 


SERVEUR 



cote client 



▲ Figure 9.2 : Processus du langage client 
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PAGE 



ECRAN 



execute 



cote serveur 




▲ Figure 9.3 : Processus du langage serveur 
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Le JavaScript peut se combiner avec de nombreux autres langages sur la 
meme page avec cette specificite qu'il est execute par le navigateur. Cette 
specificite lui donne l'avantage de pouvoir reagir immediatement a une 
action du visiteur sans qu'il soit necessaire de recharger la page. 
L' inconvenient est que les fonctions JavaScript sont dependantes du 
navigateur et de sa version. Le JavaScript a ete invente sur le navigateur 
Netscape. Puis Microsoft a voulu disposer de son propre JavaScript, en 
proposant le JScript pour Internet Explorer. Malgre les divergences, les 
deux navigateurs s'accordent sur un ensemble de fonctions communes. 
Ainsi il a ete propose par 1'organisme de regulation ECMA plusieurs 
versions du JavaScript. 
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Figure 9.4 : J script 
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JavaScript, le cerveau du navigateur 
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A Figure 9.5 : Le cerveau du navigateur 

Imaginez le navigateur comme un corps humain. Le HTML composerait 
les cellules et le code JavaScript serait le cerveau, un lieu ou convergent 
toutes les informations et qui reagit en temps reel. Imaginez que vous vous 
brflliez le doigt. Vous l'enlevez immediatement de l'objet brulant. Le 
langage JavaScript de la meme facon reagit a des evenements qui 
surviennent dans le document ou le navigateur. II controle tous les 
composants du document, son apparence et son contenu, commande le 
navigateur, intervient dans les formulaires et dialogue avec le visiteur. Le 
JavaScript est oriente vers la communication humaine : 

■ II a les yeux par-dessus l'epaule du visiteur et verifie qu'il ne fait pas 
d'erreur dans un remplissage de formulaire (verification de 
formulaires). 

■ II met en valeur un texte en mouvement pour etre sflr que le regard du 
visiteur soit accroche par un evenement important (defilement de 
texte). 
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■ II elabore un menu en arborescence qui s'escamote et se deplie selon 
le desir (menu dynamique). 
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A Figure 9.6 : Un menu dynamique 



■ II modifie V aspect de la page a la periode des fetes de fin d'annee. 

■ II se souvient du dialogue echange lors de la derniere visite grace a un 
"tiroir" dans le disque dur du visiteur (cookie). 

Si vous avez anticipe une action du visiteur par une commande JavaScript, 
votre page repond par une reaction. Desormais le visiteur attend une 
reponse immediate. S'il clique, il ne tolere plus que l'ecran soit sourd et 
aveugle. Dans ce monde virtuel, le JavaScript est devenu indispensable 
pour engager un dialogue avec les visiteurs. Meme si votre site est 
modeste, il est cree pour communiquer. Ce n'est pas la peine de mettre de 
la poudre aux yeux avec une multitude d'effets, quelques lignes de code 
pour souhaiter la bienvenue peuvent suffire. 

Quelques amuse-gueules 

Commencons par quelques amuse-gueules pour nous ouvrir l'appetit et 
comprendre les notions de base de maniere amusante. 
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Pour le JavaScript, le document est une armoire contenant une ou 
plusieurs portes, une ou plusieurs etageres, un ou plusieurs tiroirs, une 
penderie ou pas, etc. Ainsi l'objet document contient une ou plusieurs 
fenetres ouvertes qui correspondent a un ou plusieurs objets window, un 
ou plusieurs formulaires, un ou plusieurs liens, etc. 



Imprimer 

Dans votre document HTML, vous pouvez creer un lien pour imprimer, 
entre les balises HTML <B0DY> et </B0DY>. 

<a href="#" onCl ick="window.print() "> 
imprimez la page</a> 

Si le navigateur a une version egale ou superieur a Netscape 4 et Internet 
Explorer 5, le gestionnaire d'impression sera appele pour imprimer la 
page. 



I 



2fK\ 
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Etat: Inactive 

Type: HP LaserJet 1100 (MSJ 
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Commentaire: 
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A Figure 9.7 : Imprimer 
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Le caractere diese (#) dans le lien fait reference a la page elle-meme et 
permet d'activer la methode print () de l'objet window. Le terme 
onCl ick designe l'evenement provoque par un clic sur le lien. 



Jt) Le caractere diese (#) 

Le caractere diese est utilise en HTML pour un lien interne de 
la page (<a href="#bas de 1 a page">) afin de designer une ancre 
<a name="bas de la page">. Dans le cas du JavaScript, comme le diese 
est seul, il designe la page elle-meme. Notez que le lien sans objet peut, 
par exemple, avoir son adresse remplacee aussi par javascrip- 
t:void(0) ;, qui lance une fonction sans recharger la page. 



Retourner en arriere 

De la meme facon que precedemment, creez un nouveau lien. Ce lien 
servira a retourner sur la page precedente. Ce bouton imite la commande 
du navigateur qui permet de revenir en arriere. 

<a href="#" onCl ick="history .back() "> 
revenir a la page precedente</a> 

Pour revenir a une page precedente, vous disposez de la methode back() 
de l'objet history, mais vous avez aussi la methode go(), qui propose 
un equivalent. 

<a href="#" onCl ick="hi story .go(-l) "> 
revenir a la page precedente</a> 

Pour recharger la page presente, utilisez la methode history. go(0). 
Pour aller deux pages plus loin, employ ez hi story, go (2). 

Tromper les robots 

Vous avez sans doute fait 1' experience de recevoir un flot de courriels, 
principalement en anglais, envahissant votre boite d'e-mails. Pour creer 
ces messages, appeles pourriels en francais ou spam en anglais, il faut 
utiliser des robots qui recoltent les adresses sur les sites. 
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Pour tromper ces robots, vous allez modifier l'apparence du code HTML 
a l'aide du JavaScript. Vous pourrez inserer ce code n'importe oil dans 
votre page, entre les balises HTML <B0DY> et </B0DY>. 





▲ Figure 9.8: Crypter les adresses email 



Ce script est insere entre deux balises <script>. Ainsi le navigateur 
identifiera le code JavaScript a executer parmi les balises HTML. 
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a Figure 9.9 : Robots & Co 
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Commencez par creer deux variables en les declarant accompagnees du 
mot-cle var et en leur affectant une valeur via l'operateur =. Suivent deux 
lignes commencant chacune par deux lignes obliques. Ces deux lignes 
sont des commentaires, c'est-a-dire des explications sur le code. Le 
processeur JavaScript contenu dans le navigateur n' execute pas ces lignes. 

\ 

Confusion entre l'operateur a" affectation et l'operateur 
d'egalite 

II peut exister une ambigui'te entre l'operateur d'affectation (=), qui 
attribue une valeur a une variable, et l'operateur d'egalite (==), qui teste 
I'egalite entre deux valeurs ou entre une variable et une valeur. 

VJ J 

Suivent deux lignes utilisant la methode write() de l'objet document. 
Cette methode permet tout simplement d'ecrire du texte dans un docu- 
ment. Au lieu d'ecrire du texte litteral, le programme mele du texte et des 
variables. Le texte est encadre d' apostrophes, tandis que les variables ne 
demandent pas tant de precautions. Pour concatener (ou coller) les 
variables et le texte, JavaScript utilise l'operateur +, qui n'est plus ici le 
symbole de 1' addition. JavaScript determine le role de + en analysant le 
contexte : c'est un operateur d'addition quand les membres de chaque cote 
sont des nombres. 

var somme = 2+3; 

Vous pouvez aussi aller sur un site qui creera du texte JavaScript aleatoire 
pour vos adresses e-mail, comme http://aspirine.org/emailcode 
. php. Ne laissez jamais une adresse e-mail nue sur une plage web ! 

Salutations 

Pour que votre site soit un peu plus accueillant, ce petit programme affiche 
le message "Bonjour!" au chargement de la page. Son execution repose 
sur l'evenement contenu dans la balise <body> : onLoad. 

<html> 
<head> 
<script> 

function salutations() { 
al ert ("Bonjour! ") ; 
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} 

</script> 
</head> 

<body onl_oad="sal utations () "> 

</body> 

</html> 

Le programme conserve quelques instructions dans une boite appelee 
"fonction", logee dans Fen-tete de la page entre les balises <head> et 
</head>, et encadree par les balises <scn'pt> et </script>. 

Une fonction est declaree par le mot-cle function et un nom lui est 
attribue : ici salutations. Les parentheses qui suivent contiennent 0, 1 
ou plusieurs arguments, qui seront traites par les instructions internes de 
la fonction. Dans ce programme, aucun argument n'est necessaire. 
Conservez neanmoins les parentheses. Les instructions de la fonction se 
trouvent entre accolades et chaque ligne se termine par un point- 
virgule (;). En fait, le point- virgule termine une instruction. Si une ligne 
contient plusieurs instructions, elles sont separees par un point-virgule. 




Le point-virgule 

Dans un programme JavaScript, il n'est pas necessaire de 
terminer une ligne contenant une instruction par un point-virgule 
car si le point-virgule est absent, il sera implicite et le processeur 
JavaScript I'ajoutera. Ainsi il faut eviter de couper une instruction en la 
faisant chevaucher deux lignes car sinon, le programme ajoutera un 
point-virgule a la fin de chaque ligne et I'instruction sera invalide. En 
revanche, le point-virgule est obligatoire quand plusieurs instructions 
sont disposees sur une seule ligne. II est conseille, neanmoins, d'ajou- 
ter un point-virgule a toutes les fins de ligne, excepte si elles sont 
terminees par une accolade. 



La methode alert () appartient a l'objet window. Elle affiche une petite 
fenetre ornee d'un bouton OK et, quand l'utilisateur clique dessus, elle 
ferme la fenetre. 

Recapitulation 

Nous venons de voir qu'en JavaScript, il existe des objets, des methodes, 
des evenements, des operateurs, des variables et des fonctions. 
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La variable, recipient d'une valeur 

Pour qu'une variable existe, il faut necessairement qu'elle ait ete declaree, 
sinon votre page affichera une erreur JavaScript. 




La variable 

La variable alloue une portion de la memoire de votre ordina- 
teur a une donnee et le nom de la variable permet de designer le 
contenu de cet emplacement memoire. Une variable typee permet de 
bien gerer la memoire car un objet Date, par exemple, prend moins de 
place que son equivalent en chaTne de caracteres. 




chaTnedecaracteres 



objet 



VARIABLE 

espace memoire 



354.7 



▲ Figure 9.10 : Variables 



La declaration se fait soit d'une maniere simple : 



var a; 



soit combinee avec une affectation de valeur : 



var a=10; 



En JavaScript, les variables sont peu typees. La valeurs peuvent etre de 
type numerique (10), litteral ("dix"), booleen (true), etc. 

La variable est une sorte de portemanteau : au debut du programme, elle 
porte un manteau puis au milieu un blouson et a la fin un impermeable. 
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Elle peut etre declaree avec une valeur numerique, comme 10, et ensuite 
etre affectee d'une chaine de caracteres, comme "dix", sans qu'il y ait 
d'erreur. 

Une variable peut contenir plusieurs valeurs. Dans ce cas, on parle de 
tableau. 

Le tableau, placard pour ranger plusieurs donnees 

Un tableau est une collection de valeurs heterogenes. Elles ont identifiees 
par un indice. La premiere case a un indice 0, la deuxieme un indice 1, etc. 
Le tableau est un moyen pratique de stocker plusieurs valeurs ou, a 
Finterieur d'une fonction, de retourner un ensemble de valeurs. 



TABLEAU 



lundi 



mardi 



2 mercredi 



3 ||jeudi 



4 vendredi 



5 samedi 



6 dimanche 



< Figure 9.11 

Tableau 



Le tableau peut etre cree de differentes manieres : 
var tousl esmoi s= new Array (); 

Ce tableau est vide, mais il est possible de lui affecter directement des 
valeurs de la facon suivante : 



724 • Double Poche CSS 



Le JavaScript 



var tousl esmoi s= new Array("", "janvier", 
"fevrier", "mars", "avril", "mai", "juin", 
"juillet", "aout", "septembre", "octobre", 
"novembre" , "decembre"); 

Le tableau contient desormais une case vide et les douze mois de l'annee 
en francais. Vous allez comprendre assez vite pourquoi la premiere case 
est vide. 

Pour avoir la valeur du cinquieme mois, il faut ecrire : 



document. write("Quel est le nom du cinquieme mois ?" 
+tousl esmoi s [5] ) ; 
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• Janvier 


1 






• fevrier 








• mars 








• avril 








• mai 








• juin 








■ juillet 








• aout 








• septembre 

















▲ Figure 9.12 : Affichage des mois 

Pour afficher tous les mois, il est necessaire d'utiliser des instructions de 
boucle de type for : 

document. write("Voici les 12 mois de l'annee: <UL>") 

for (i=l ; i<13 ; i++) { 

document. write("<LI>", tousl esmoi s [i] ) 



Double Poche CSS • 725 



- 

9 Les CSS se marient bien 

} 

document. write("</UL>") ; 

En JavaScript, la methode getMonth () permet d'obtenir le mois a partir 
d'un objet Date. 



La methode getMonth() 

L'information que renvoie la methode getMonth () est I'indice 
du mois. Cet indice est 0 pour janvier, et non 1. Ainsi, le tableau 
des mois ne necessiterait plus de premiere cellule vide. 




Les instructions, rouages et moulinettes 

Dans l'exemple precedent, une instruction evite de repeter le meme code 
douze fois pour afficher le nom du mois. Elle forme une boucle qui 
execute la meme instruction douze fois pour afficher la liste des mois. 

La boucle for comprend trois arguments separes par un point-virgule. Le 
premier donne la valeur de depart de la boucle. En 1' occurrence, ici la 
variable i prend la valeur 1 au premier tour. Le deuxieme argument est la 
valeur limite de i . Elle declenche, une fois atteinte, la sortie de la boucle. 
Enfin, le dernier argument indique le pas de 1' incrementation de i a 
chaque tour, ici 1. 

if , else, else if 

Pour tester si un predicat est vrai ou faux, vous disposez de trois outils : 
if, else et else if, qui sont complementaires. 

Si {le ciel est bleu] alors {le temps est beau} sinon [le temps est 
nuageux}. 



if (ciel=="bleu"){ 
temps="beau" ; 

} 

el se { 

temps="nuageux" ; 

} 
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▲ Figure 9.13: Beau temps ou pluie ? 

Cette sequence procede d'une logique. Cela parait evident, mais des 
erreurs peuvent se produire : 

■ si Ton confond = (egalite) et == (affectation d'une valeur) ; 

■ si la sequence contient une erreur de logique, par exemple : 

if (ciel ! = "bleu"){ 
temps="pluvieux"; 

} 

el se { 

temps = "beau" ; 



Ici le predicat est faux, non pas a cause de la syntaxe mais de la logique. 



L'operateur != 

L'operateur != permet un test sur le predicat "est different 



de". 
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Parfois il est interessant de devider les elements d'un tableau ou de les 
provisionner avec une valeur qui s'incremente. C'est la que les instruc- 
tions whi le et for deviennent indispensables. 



while 

while est une boucle qui se poursuit tant que le predicat est vrai : 



<script language="JavaScript" 

type="text/javascript"> 
<!-- 
var i=9; 
while (i<=17){ 
if (i<12){ 
document. write("<br>Il est "+ 


i +' 


' heures!"); 


if(i>=12 && i<13){ 
document .write ("<br>Il 
document. write(" C'est 


est "+ 
1 ' heure 


i +' 
du 


' heures!"); 
repas ! ") ; 


} 

if (i>=14 && i<=17){ 
document .write ("<br>Il 


est "+ 


i +' 


' heures!"); 


} 

if (i ==17) { 
document. write(" C'est 

} 


1 ' heure 


de 


la sortie") ; 


i++; 

} 

//"> 
</script> 















Une boucle est caracterisee par un increment, ici i ++, et un argument de 
sortie, whi le (i<=17). Le test de la boucle est le suivant : la boucle se 
poursuit tant que i est plus petit ou egal a 17. 

L'operateur unaire ++ ou — permet d'incrementer ou de decrementer la 
valeur d'une variable. II equivaut a i=i+l ou a i = i — 1 . 

Si cet operateur decrementation ou de decrementation n'est pas present, 
la boucle reste sur la premiere valeur et devient infinie, ce qui peut etre 
dangereux pour une machine. Heureusement, JavaScript a un parapet pour 
arreter les boucles infinies et le navigateur, assez vite, propose d'inter- 
rompre 1' execution du programme. Si vous remplaciez les if par des 
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whi 1 e, la premiere boucle a l'interieur de la grande boucle serait infinie, 
bloquee sur la premiere valeur, 9. 



^ HTML-Kit - [while php] 
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<script language^" JavaScript" type="text/javascr 


ipt"> 






var i=9; 










whil* (i<=17) { 








14 


if (i<12) { 

document. write | "<br>Il 


est *** i •* heures!"); 






16 


i£ (i>=12 ii i<13) { 










document. write | "<br>II 


est "* i -" heures!"); 






19 


document .write ( " C'est 


J'heure du repast"); 






20 










21 


if ii>=13 a i<=17) ( 








n 


document .write ( "<br>Il 


est "* i *" heures!"); 






23 
24 


ie (i— 17) { 








25 


document .write ( ■ C'est 


I'heure de la sortie"); 






26 










27 


i++; 








2£ 










29 


//-- > 








: : 


</script> 








Editor Preview Output SplitView 


9 








:D 1 * ...e.php * ...okie.php .* 
1:1 INS 


Jtion.php . .kie2.php Jr . .kie"! php * 


titrel php ^ 


etre php Jt ...etre.php 



▲ Figure 9.14 : While 




break et continue 

Dans une boucle, pour economiser du temps et de la res- 
source serveur, il est courant d'utiliser break dans un test condi- 
tionnel. Cette instruction rompt la boucle et evite plusieurs tours inutiles. 
Tandis que continue permet de sauter une boucle sur une condition et 
de poursuivre a la boucle suivante directement. 
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for 

La boucle for est une boucle while qui integre tous les parametres, 
c'est-a-dire le debut de la boucle, la fin de la boucle et 1' incrementation.: 



<script 1 anguage="JavaScript" 

type="text/javascript"> 
<!-- 

for (i=9;i<=17;i++) { 
if (i<12){ 
document. write("<br>Il est "+ 


i + 


heures ! ") ; 


if(i>=12 && i<13){ 
document .write ("<br>Il 
document. write(" C'est 


est "+ 
1 1 heure 


i + 
du 


heures ! ") ; 
repas! ") ; 


} 

if (i>=13 && i<=17){ 
document .write ("<br>Il 


est "+ 


i + 


heures ! ") ; 


} 

if (i ==17) { 
document. write(" C'est 

} 


1 1 heure 


de 


la sortie") ; 


} 

//--> 
</script> 









Les arguments sont separes par un point-virgule : 

■ la valeur d' initialisation ; 

■ la valeur limite ; 

■ l'increment ; 




Plusieurs variables 

II est possible d'inserer plusieurs variables dans les arguments 
de for : il suffit pour cela de les separer par une virgule, par 
exemple for (i=9,j=0;i<=17;i++,j+=3). 



Preferez les boucles for aux boucles whi 1 e, excepte quand vous avez deja 
la valeur d'initialisation. 
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Les fonctions, automates a votre service 

La fonction est un petit programme autonome que Ton retrouve princi- 
palement dans les en-tetes de page. Voici les caracteristiques de la 
fonction : 

■ mot-cle function ; 

■ nom ; 

■ arguments ou absence d' arguments entre parentheses ; 

■ instructions entre accolades ; 

■ valeur retournee ou non avec le mot-cle return. 




La fonction 

La fonction est un ensemble nomme d'instructions entre 
accolades, dans laquelle on peut injecter des arguments sous 
forme de valeurs entre parentheses et qui peut retourner une valeur par 
I'intermediaire du mot-cle return. 

v j 



La fonction est appelee par un evenement, comme onClick, 
onSubmit, etc. 

Des que le programme rencontre un return, la fonction s'arrete. Si vous 
subordonnez la soumission d'un formulaire a une fonction et qu'elle 
retourne false, Faction avorte et le formulaire n'est pas envoye vers sa 
destination, jusqu'a ce que les conditions d' envoi soient reunies et que la 
fonction retourne true. 



<form action="trai tement.php" method="post" onSubmit=" return 
s-= veri f_emai 1 () "> 



Les objets, outils specialises 

Les objets sont des containers contenant un ensemble de proprietes dotees 
chacune d'un nom et d'une valeur. Les proprietes sont done des sortes de 
variables inherentes a l'objet. 

Par exemple, screen. height definit la propriete height (hauteur) de 
l'objet screen (ecran). Cette variable, que nous allons appeler "pro- 
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priete", prend une valeur implicite des l'ouverture de la page selon la 
resolution de l'ecran du visiteur du site. 




L'objet et ses instances 

L'instance d'un objet est creee avec la methode new() suivie 
du nom de l'objet. L'objet modele est le prototype de l'objet et son 
nom commence par une capitale. L'instance a les memes attributs que 
l'objet lui-meme et permet d'effectuer des transformations. Tandis que 
des modifications sont faites sur l'instance, l'objet lui-meme demeure 
vierge. 



Le point qui separe screen et height signifie que la propriete height 
appartient a screen. 

L'objet screen est un objet natif contenu dans le noyau de programme 
JavaScript. Ainsi, il n'est pas necessaire de le creer. 

L'objet contient aussi des methodes, qui sont les fonctions integrees de 
l'objet. Prenons un autre objet : Date. Vous auriez peut-etre envie de 
mettre la date du jour sur votre site ? La date affichee par un JavaScript est 
celle de l'ordinateur de l'utilisateur. Ainsi deux visiteurs, Fun au Quebec, 
l'autre en France, auront deux dates differentes tandis qu'ils sont sur la 
meme page au meme moment. 

1 . Pour creer un objet Date, utilisez la methode new() . 
madate= new Date() ; 



2. Pour la mettre au format local sans faire trop de manipulations, utilisez 
la methode toLocal eStri ng () . Ici la methode toLocaleString() 
formate la date selon le pays du visiteur. 

datel ocal e=l adate. toLocal eStri ng () ; 
document.wri te("Nous sommes le " + datelocale); 
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Les objets String, Math ou Date sont natifs, c'est-a-dire qu'ils sont deja 
dans le noyau JavaScript propre a chaque navigateur. Mais vous pouvez 
construire un objet en utilisant un constracteur. II s'agit d'une fonction qui 
cree un objet a la demande. 

Par exemple, si vous en avez assez de formater les noms recueillis dans un 
formulaire pour vous adresser au visiteur, creez d'abord le constructeur de 
l'objet VotreNom : 

function VotreNom(prenom,nom) { 
this.prenom = prenom; 
this.nom = nom; 

} 

Le mot-cle this represente l'objet courant. Ainsi, les arguments envoyes 
a la fonction deviennent respectivement les proprietes prenom et nom de 
l'objet VotreNom. 

Faites alors appel au constructeur avec le contenu des champs prenom et 
nom du formulaire : 

votrenom=new VotreNom( 

document . forms [0] .prenom. val ue, 
document. forms [0] .nom. value) ; 

Une fois le formulaire rempli, remerciez le visiteur : 

alert (votrenom. prenom + " " + votrenom.nom) ; 

II vous faudra commencer le prenom et le nom par une capitale et vous 
aurez done besoin d'une fonction. 

Les differents navigateurs et le JavaScript 

Pour l'instant, le navigateur le plus compatible JavaScript est Internet 
Explorer. L'acclimatation des navigateurs a JavaScript depend des diffe- 
rentes versions des navigateurs et du JavaScript. 
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IN Comment c* m» 


che? [I'informatique] - COK - L'efvcyetopedte informatique libre - Netscape 6 


■ 1J. . 


. [Kim [dftien WkIwi 


Recfc'iiwf Altr a Signed IWn A-it 




















▲ Figure 9.15 : Avec Netscape 

Comment tout cela a commence ? 

Netscape a commence par developper dans les annees 90 un langage de 
script, LiveScript, qui agissait directement sur le client web (le naviga- 
teur). En 1995, Sun Microsystems recupere LiveScript et l'appelle 
JavaScript, pour ajouter encore un peu de notoriete au langage que Sun 
developpait alors, Java. JavaScript est pris en charge au fil de son 
evolution par differentes versions de Netscape. Microsoft, interesse, 
decide alors de l'integrer a Internet Explorer. Microsoft ne se contente pas 
d'integrer JavaScript mais cree un langage derive, le JScript, qui ressem- 
ble a JavaScript sans etre du JavaScript. JScript a Finconvenient de ne 
s'executer que sous Internet Explorer sans apporter d' ameliorations 
interessantes par rapport a JavaScript (voir Figure 9.16). 
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^) Comment <;* marche? [I'inforrrwtique] - CCm - L 'encyclopedic informatique libre - Mjithon 




Figure 9.16 : Avec Internet Explorer 




Java et JavaScript 

Le JavaScript n'est pas du Java, comme son nom le laisse 
supposer. lis ont quelques vagues parentes, comme I'utilisation 
des objets, mais leur ressemblance s'arrete la. 



Des navigateurs qui ne naviguent pas dans 
les memes eaux ! 



Tab. 9.1 : integration des differentes versions de JavaScript dans les 
versions successives des navigateurs 


Version de JavaScript 


Navigateur 


JavaScript 1.0 


Netscape Navigator 2.0, Internet Explorer 3.0, Opera, 
Mozilla 
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Tab. 9.1 : L'integration des differentes versions de JavaScript dans les 
versions successives des navigateurs 


version Uc jdvdounpi 


iMavigaieur 


JavaScript 1.1 


Netscape Navigator 3.0, Opera, Mozilla 


JavaScript 1.2 


Netscape Navigator 4.0/4.05, Internet Explorer 4.0, 
Dnpra Mn7illa 


JavaScript 1.3 


Netscape Navigator 4.06, Internet Explorer 5.0, Opera, 
Mozilla 


JavaScript 1.4 


Netscape Navigator 6.0, Internet Explorer 6.0, Opera, 
Mozilla 


JavaScript 1.5 


Netscape Navigator 6.0, Mozilla 



Pour que le code n'apparaisse pas en clair dans les navigateurs antiques, 
le script est systematiquement mis en commentaires. 

<script 1 anguage="Javascript"> 
<!-- 

Placez ici le code 

// "> 
</script> 

Plus le script est sophistique, moins le nombre de navigateurs qui le 
comprennent est grand. II est done conseille de choisir, pour les memes 
effets, le script le plus largement compris. 

Le jeu "Chercher la mouche" 

Vous allez faire un petit jeu emprunte a l'excellent site www 
.bib! ioscript.com/javascript/. II s'appelle "chercher la mouche" et 
consiste a placer une mouche invisible sur l'ecran et a la trouver. Les 
dames de la cour pratiquaient ce jeu dans un but moins avouable, avec un 
homme aux yeux bandes. 

Le langage de programmation sert a recevoir, a transformer et a trans- 
mettre de Finformation. Le programme joue d'abord une sorte de roue 
avec des numeros et s'arrete au hasard sur l'un de ces numeros puis tourne 
pour tirer un deuxieme nombre. La combinaison de ces deux nombres 
donne la position virtuelle de l'objet mouche. 
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Chaque coup du joueur consiste a recueillir une position x et une 
position y via un formulaire et a les comparer avec la position de la 
mouche pour indiquer si la proposition du joueur est trop haute ou trop a 
droite. Le but du jeu est de trouver cette position en portant le moins de 
coups possible. Vous allez adapter le jeu en fonction de la resolution de 
Fecran du joueur. Vous pourriez aussi permettre de jouer a deux joueurs, 
mais tel n'est pas le propos ici. 

1 . Commencez par recueillir la resolution de Fecran du joueur dans deux 
variables. 



hauteur_ecran = screen. height; 
1 argeur_ecran = screen. width; 



En JavaScript nous avons des objets, des proprietes et des methodes. 

Ces valeurs sont recueillies dans des recipients nommes "variables" . Ici 
hauteur_ecran recueille la valeur de screen. height et largeur_e- 
cran, celle de screen. width. 




La denomination des variables 

Pour nommer une variable, vous ne pouvez employer d'espa- 
ces. Son nom peut se composer de lettres de I'alphabet, de 
chiftres, et des caracteres _ et &. II peut commencer par une lettre ou un 
blanc souligne (_). 



On peut dire que la propriete height est une variable a l'interieur de 
Fobjet screen. Ainsi, vous auriez pu ecrire : 

hauteur_ecran = screen["height"] ; 
1 argeur_ecran = screen["width"] ; 

Ici, l'objet est vu comme un tableau associatif. Un tableau est une variable 
qui contient plusieurs cases, ce qui lui permet de ranger des valeurs 
differentes dans un meme ensemble. 

Les valeurs height et width sont rangees dans une armoire screen. 
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Maintenant, vous allez cacher la mouche, quelque part dans l'ecran, de 
facon aleatoire. Pour cela, vous avez un objet a votre disposition, Math, et 
sa methode random(). 



La methode random() 

La methode random () genere un nombre pseudo-aleatoire 
entre 0.0 et 1.0. II faut done le multiplier par la taille de l'ecran 
pour obtenir un nombre entre 0 et la definition de I'affichage en pixels et 
savoir ainsi sur quel pixel la mouche s'est posee. 



Les lignes precedentes sont un ensemble d' instructions liees a une 
condition. Le caractere = est un operateur d' affectation de valeur a la 
variable. Le programme est lu de droite a gauche par la machine, qui 
reconnait d'abord la valeur puis la variable a laquelle elle est affectee. 

2. Pour positionner la mouche : 




var 


valeurx 


= Math.round(Math.random() 


* largeur); 


var 


valeury 


= Math.round(Math.random() 


* hauteur) ; 


var 


i=0; 







Ces valeurs sont entrees au chargement de la page et ne varient pas au fur 
et a mesure des appels a la fonction. 

3. L'instruction wi ndow. prompt () ouvre une fenetre dans laquelle 
l'utilisateur peut entrer un texte. 

4. Recueillez ce texte dans la variable reponse. 

5. Demandez a l'utilisateur d'entrer les coordonnees de la mouche sous 
la forme 0x0. 

6. Traitez ensuite le texte pour recuperer les valeurs qui encadrent x. 

7. Utilisez la methode spl it(), qui envoie les valeurs dans un tableau 
nomme coordonnees. 
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function question() { 




i++; 




var reponse=window. prompt ("Donnez 2 


nombres entre 0 et " 


+ mul ti pi i cateur + " sous la forme 


0x0",""); 


coordonnees =reponse. spl i t ("x") ; 






Fkrhier Edition Affichage Fayoris Groupes Options Outis Fenetres Ade 



Ad r esse *1 http://wvvw.acce5Aes.com/iavascnpt/jeu.php 

ft -ft] Guide des chaines £)Hotmai £j Infos sur Internet Ex ptorer £j Internet demarrage *|Leme* 

Sanstitre | Lejeu! 



Jouez 



Invite utilisateur de Internet Explorer 


\ 


Invite de script: 


i « 


Donnez 2 nombres entre 0 et 1000 sous la forme 0x0 






Annuler 


440x300 





a Figure 9.17 : Le jeu 



8. Transformez la valeur recueillie en nombres par la methode 
parselnt(). 

1 argeur=parselnt (coordonnees [0] ) ; 
hauteur=parselnt (coordonnees [1] ) ; 



La methode parselnt() 

Le texte conserve dans le tableau est litteral. Pour pouvoir 
devenir un nombre, il devra subir le traitement de la methode 
parselntQ. II en est de meme pour toute valeur recuperee sur un 
formulaire ou une fenetre prompt (). En cas d'oubli, I'operateur ne serait 
plus un operateur d'addition mais de concatenation. Ainsi 1+1 devien- 
drait 11, et non pas 2. 
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9. La variable averti ssement accueille le texte litteral qui sera affiche 
apres chaque tentative du joueur. 

10. L'operateur permet d'incrementer une nouvelle chaine dans le mes- 
sage final, selon la position proposee, a Tissue d'une serie de tests sur 
les valeurs largeur et hauteur, qui sont comparees a la position 
valeurx et valeury. 

11. Le mot-cle return sert seulement a stopper la fonction car aucune 
action n'est subordonnee au succes de cette fonction. 

var averti ssement="Votre score : " + i + "\n"; 
if (1 argeur==val eurx && hauteur==val eury) { 

averti ssement+= "Bravo, voiis avez gagne!"; 

return true; 

} 

else { 

averti ssement+= largeur + " : "; 

if (1 argeur<val eurx) { 

averti ssement+= "trop a gauche, "; 

} 

if (1 argeur>val eurx) { 
averti ssement+= "trop a droite, "; 

} 

if (1 argeur==val eurx) { 
averti ssement+= "Les coordonnees hozizontales 
sont correctes, "; 

} 

averti ssement+= hauteur + " : "; 
if (hauteur==val eury) { 
averti ssement+= "les coordonnees vertical es 
sont correctes"; 

} 

if (hauteur>val eury) { 
averti ssement+= "trop haut!"; 

} 

if (hauteur<val eury) { 
averti ssement+= "trop bas!"; 

} 

} 

alert (averti ssement) ; 

} 
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* Figure 9.18 : 

Resultat du jeu 



12.11 vous reste a inserer un evenement declencheur de la fonction. Ici 
utilisez un lien vide et subordonnez l'appel a la fonction a F evenement 
onCl ick. Dans le corps de la page, il suffrt done d'ajouter : 

<a href="#" onCl ick="question() ">Jouez</a> 

A chaque clic sur le lien, le joueur propose des coordonnees qui sont 
comparees a celles qui ont ete fournies aleatoirement. Un message d'alerte 
le guide ensuite au fur et a mesure. Le but est de trouver la mouche en 
cliquant le moins souvent sur le lien. Le score est indique a chaque 
tentative. 

Quelques outils complementaires 

Vous avez vu les principales notions de JavaScript dans ce chapitre. 
Pourtant, il vous manque encore certains outils d'affinage qui permettent 
de gagner du temps et d'ameliorer la lisibilite des programmes. Pour le 
moment, ne vous en occupez pas trop, vous les retrouverez plus tard dans 
des exemples qui vous feront voir l'interet de les utiliser. 

Les commentaires 

Les commentaires peuvent venir sur une ligne. Dans ce cas, ils sont 
precedes de deux barres obliques. Ils peuvent occuper toute une ligne ou 
un bout de ligne apres des instructions JavaScript. Quand ils occupent 
plusieurs lignes, ils sont ouverts par une barre oblique suivie d'un 
asterisque et fermes par un asterisque suivi d'une barre oblique. 

//Le code qui suit est facultatif jusqu'au mot FIN 
var arrivee=New Date() ; 
// FIN 
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/* Cette boucle n'est necessaire que si 

vous ajoutez des donnees 
for(i=0,j=5 ;i<=17 ;i++){ 
J++ ; 

} 

7 



Dans cet exemple, la variable arri vee prendra une valeur. Par contre, la 
boucle for ne sera pas executee puisqu'elle se situe dans des 
commentaires. 



|jj HTML-Kit - [commentaires. php] 



Echier £diOon Affchage Outte Babes Actions Workspace Fenetre Ajde _ fi 5 X 



I < ! DOCTYPE HTML PUBLIC W3 2/ ■' I TZ HTML 4. CI Transit ional/ /EN"> 

2 

3 <htnl> 

* <head> 

5 <titie>Comraentaires</title> 

6 </head> 

7 <body> 

B <script language=" JavaScript" type="text/ javascript"> 

0 //Le code qui suit est facultatif jus\u'au mot FIH 

1 var arrivee=New Date 1 ) ; 
a // FIN 

f /* Cette boucle n'est necessaire que dans le cas ou vous ajoutez des 

4 for(i=0,j=5 ;i<=17 ;i++) { 



var le_mois=getMonth I arrivee 

// — > 
ao </script> 

Editor Previ ew Output S p lit Vi ew nj^ 

' e? " D I j' ....php ■* -ile php jt . kie.php * ..ion php * ie2php * . ie1 php * rel php * ...tre.php * ...tre.php 
18:31 INS 



▲ Figure 9.19 : Commentaires 



Les commentaires sont utiles si quelqu'un vous aide ou reprend votre site, 
lis le seront egalement pour vous, quand apres plusieurs mois, vous 
reprendrez un script et que vous ne vous souviendrez plus de ce que vous 
avez fait ni a quoi sert telle ou telle variable. Une petite ligne de 
commentaires suffit parfois a decrypter un code. 
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Les commentaires sont precieux au cours d'un debogage. II permettent de 
desactiver des parties de code et de se concentrer sur d'autres parties. Si 
le bogue persiste, cela permet d'ecarter les portions de code visees. Les 
combiner avec des fenetres d'alerte affichant les valeurs de certaines 
variables au cours de l'execution du code permet de localiser la panne. 

Le switch ou commutateur 

Le switch est comme un "commutateur de lignes telephoniques" : vous 
lui fournissez une valeur et il enumere une suite de tests sur cette valeur 
pour la retrouver parmi une serie repertoriee, puis execute une instruction 
avant de sortir avec la commande break, qui rompt l'execution de la 
recherche. 

Le mot-cle switch initialise le bloc avec comme argument une expres- 
sion. Le mot-cle case est suivi d'une valeur puis d'un deux-points et enfin 
d'une instruction. Le mot-cle break evite de poursuivre l'execution du 
code des que la valeur recherchee est trouvee. Un mot-cle facultatif 
default propose une instruction en cas d'echec de la recherche. Cette 
derniere instruction sera executee si la valeur n'est pas trouvee. L'ins- 
truction switch permet de parcourir rapidement plusieurs possibilites 
avec une valeur simple comme argument. 

switch (i) { 
case 1 : var item = new Array ( 1 bal ai ' , 

'eponge gratounette 1 , ' serpi 1 1 ere ' ) ; break; 
case 2 : var item = new Array ('television 1 , 

'lecteur DVD 1 ,' home-cinema ') ; break; 
case 3 : var item = new Array ( ' arrosoi r 1 , 1 beche ' , 

'semoir'); break; 
default : var item = new ArrayO; break; 

} 

Ici, la variable i a deja recue une valeur d'un element de formulaire. Selon 
sa valeur, qui va jusqu'a3, c'est Fun ou l'autre des tableaux qui est 
designe. 

Un operateur ternaire plus elegant que le if... else 

Cet operateur rassemble trois parties en une seule ligne et remplace 
avantageusement if... else. Vous allez reprendre l'exemple precedent 
utilisant i f... el se : 
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if (ciel !="bleu"){ 
temps="pl uvieux" ; 

} 

else { 

temps="beau" ; 

Maintenant recrivez-le avec l'operateur ternaire : 

var ciel!="bleu" ? temps=pl uvieux : temps="beau" ; 

L'operateur ternaire est compose de trois membres 

■ le test ciel ! = "bleu" suivi d'un point d'interrogation ; 

■ l'instruction si le test est vrai, suivie d'un deux-points ; 

■ l'instruction si le test est faux, terminee par un point-virgule. 

Comme ce code prend une seule ligne, le script est plus ramasse et done 
plus lisible. 



L'objet Arguments est special. II se comporte comme un tableau mais 
n'est pas un objet Array ( ) . II contient tous les arguments envoyes lors de 
l'appel a une fonction. 



Cet objet est interessant a plus d'un titre. Ainsi, pour une fonction qui ne 
recoit qu'un argument, Faeces a cet argument peut se faire par son nom 
ou par arguments [0] . Si vous envoyez plus d'arguments que prevu dans 
la fonction, les arguments anonymes seront stockes dans arguments [1] , 
arguments [2] , etc. Cela permet de creer des fonctions a geometrie 
variable, reutilisables dans nombre de situations differentes. 

Une propriete lui est adjointe, length, qui donne le nombre d'arguments 
dans l'objet. 



L' 



objet Arguments 




y Les arguments d'une fonction 

Les arguments sont les variables nommees entre les paren- 
theses qui suivent la declaration du nom de la fonction. 
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function somme(a,b) { 

if (arguments . 1 ength<2) { 
var reponse=alert("Entrez deux nombres!"); 

} 

el se{ 
var reponse=a+b; 

for (i=2;i<arguments.length;i++) { 
var reponse=reponse+arguments [i] ; 

} 

} 

alert("La somme fait " + reponse) ; 
} 

Selon le nombre d'arguments envoyes a la fonction, le calcul sera adapte. 
C'est ce que Ton appelle 1' encapsulation, c'est-a-dire que cette fonction 
pourra etre inseree dans n'importe quelle page sans demander aucune 
modification. 

Les regies ideales d' encapsulation sont les suivantes : 

■ Le nom de la fonction doit etre explicite, c'est-a-dire clairement 
indiquer le role de la fonction en question. 

■ Elle doit accueillir un nombre variable d'arguments selon les besoins. 

■ Elle doit accueillir tout type de donnees. 

Evidemment, vous devez essayer d'appliquer ces regies dans la mesure du 
possible. Mais les fonctions ne repondent que rarement a ces trois regies. 

Les cookies 

Les cookies sont de petits fichiers stockant des variables. lis peuvent durer 
le temps de la session de navigation, c'est-a-dire qu'ils sont detruits quand 
l'utilisateur ferme son navigateur. Cette configuration est celle par defaut, 
si vous ne specifiez aucune date d'expiration. 



Tab. 9.2 : Les proprietes de I'objet cookie 




Fonction 


Valeur par defaut ou statut 


name 


Nom du cookie 


Obligatoire 
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Tab. 9.2 : Les proprietes de I'objet cookie 




Fonction 


Valeur Dar defaut ou statut 


expires 


Temps de vie 


Par defaut, le temps de 
I'ouverture du naviqateur, au 
format Fri , 05-Nov-2004 
11:13:59 GMT (lui affecter une 
date du passe detruit le cookie) 


path 


Provenance du cookie 


Par defaut, le chemin vers la 
page de provenance 


domai n 


Domaine qui I'utilise 


Par defaut, le nom du domaine 
qui I'a cree 


secure 


Acces du cookie uniquement 
sous https (repertoire securise) 





L'usager peut refuser les cookies 

L'usager, pour de multiples raisons, peut refuser I'enregistre- 
ment de cookies sur son disque dur en reglant les options de son 
navigateur. 



Vous inserez un formulaire recuperant les coordonnees de votre visiteur et 
vous en profitez pour stocker son nom dans un cookie pour pouvoir 
l'accueillir de facon personnalisee chaque fois qu'il se connecte a votre 
site. Pour cela, creez la fonction biscuit() comme suit : 



function biscuit(){ 
var nom=document.forms[0] .nom. value; 
var expiration=new Date(); 
expi rat i on . setTi me (expi rat i on . getTi me () + 

(365*24*3600*1000)); 
expi rati on=expi rati on. toGMTStringO ; 
contenu="identite=" + escape(nom); 
contenu+=" ;expi res=" + expiration; 
document. coo kie=contenu; 

} 
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▲ Figure 9.20: Fonction biscuit() 



1. La fonction biscuit() commence par construire les parametres qui 
seront stockes dans le cookie. Le nom est recupere depuis le champ 
Nom du formulaire. La date d'expiration est repoussee a in an a 
compter de la date courante. Le temps courant est donne en millise- 
condes depuis le l er janvier 1970. A cela s'ajoute les millisecondes qui 
constituent la duree d'une annee. Ce temps brut est ensuite formate en 
temps GMT par la methode toGMTStri ng () . 




Le 1 er janvier 1970 

Le temps dans les programmes informatiques est calcule en 
millisecondes depuis le 1 er janvier 1 970. Au debut des ordinateurs 
personnels, la memoire etait faible et les programmes se servaient done 
de cette date comme repere pour creer une autre date. Or I'ere 
chretienne commence le 1 sr janvier 0000. La methode getTime() 
calcule cet ecart de temps entre le moment courant et ce point de 
repere. 
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2. Les parametres sont ensuite inseres un a un, separes par un point- 
virgule, dans la variable contenu, qui sera deposee dans l'objet 
document, cookie. 



Alphonse Allais 




< Figure 9.21 

Cookie 1 



escape() 

Vous ne pouvez utiliser le caractere de separation dans la 
valeur de la variable, en I'occurrence le point-virgule. Cette 
interdiction s'est etendue a I'espace et a la virgule. Pour neanmoins 
pouvoir les integrer, utilisez la methode escape (). Si vous utilisez cette 
methode pour ecrire un cookie, il sera necessaire de lire les valeurs 
avec la methode unescapeQ. 



Le cookie est cree au moment de la soumission du formulaire par 
Fevenement OnSubmi t="bi scui t () " inclus dans la balise form. 



Maintenant que cette information est cachee sur le disque dur de votre 
visiteur, il faut inclure du code pour la recuperer. 



Bienvenue Alphonse Allais 



a Figure 9.22 : Cookie 2 
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3. Dans le body de la page qui affichera le contenu du cookie, inserez par 
exemple ce code : 

<script 1 anguage="JavaScri pt" type="text/javascri pt"> 
<!-- 

LesCookies = document. cookie; 

// lit le cookie 

Debut = LesCookies. indexOf ("=") ; 

// releve la position du caractere "=" 

LongueurCooki e = LesCookies. length ; 

// longueur du cookie. 

Fin = LesCookies. indexOf(" ;") ; 

// releve la position du caractere ";" 

if (Fin == -1) { 

// debut du test 

Fin = LongueurCooki e ; 

// la fin est la longueur du cookie, 

//car le caractere ";" n'existe pas 
} // fin du test 

VotreNom = LesCookies. substring(Debut + 1, Fin); 
// extrait le nom 
document. write("<b>Bienvenue " + 
unescape(VotreNom) + "</b>"); 
// affiche le nom dans la page 

//--> 
</script> 

Vous utilisez largement les methodes indexOf() et substring () pour 
deceler limites(;) et separateurs (=) ou pour engranger les differentes 
valeurs encadrees par ces signes. N'oubliez pas la methode unescape() 
pour remettre les espaces eventuels en forme lisible ! 



4. Les valeurs peuvent aussi etre communiquees au programme par un 
prompt (). 



var nom=window. prompt 

("Quel sont vos prenom et nom ?",""); 
contenu="identite=" + escape(nom); 
contenu+=" ;expi res=" + expiration; 
document . coo kie=contenu; 



5. Ici, il peut etre interessant d'ajouter les fonctions vues precedemment 
pour formater les noms. 
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Les cookies sont un moyen pratique pour conserver une d' information sur 
plusieurs pages du site. L'inconvenient est que certains visiteurs ont choisi 
de ne pas accepter les cookies. Par ailleurs, la taille des informations est 
limitee ainsi que le nombre de cookies. 




\ 

Les limites des cookies 

Un ordinateur ne peut contenir que trois cents cookies a la fois, 



de plus de 4 Ko chacun. La limite est de vingt cookies par serveur 
maximum. 

V J 



Tester si les cookies sont acceptes 

Comment savoir si le navigateur d'un visiteur accepte les cookies ? Pour 
cela, creez une page de test sur votre site et demandez a vos visiteurs d'y 
passer s'ils ne sont pas certains que l'option d'acceptation de cookies est 
choisie. 



function test_cookie( ) { 

document. cookie = "test= test_cookie" ; 

var pos = document. cookie. indexOf( "test=" ); 

if( pos == -1 ) 

{ 

alert( "Veuillez activer les cookies sur votre 

navigateur, s'il vous plait!" ); 
return "non"; 

} 

alert ( "Votre navigateur accepte bien les cookies, 

merci ! " ) ; 
return "oui"; 

} 



Microsoft Internet l^cplorer 



-« Figure 9.23 

Test cookie 
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Si le test est passe avec succes, un lien vers la page est affiche avec le 
message qui donne le resultat du test. 

if (test_cookie()=="oui ") { 
document.wri te( '<a href="monautrepage.php"> 
mon autre page</a>'); 

} 



Un compteur 

Voici un autre exemple d'application : un compteur de visiteurs. Le 
programme est compose de plusieurs fonctions encapsulees. 




L'encapsulation 

L'encapsulation consiste a ecrire un programme de sorte qu'il 
puisse etre utilise par differents scripts. En JavaScript, c'est une 
fonction ou un objet. Ici la fonction ranger bi scui t() peut etre appelee 
dans n'importe quelle circonstance. 



Le compteur vous servira a identifier les visiteurs sur votre site et a 
reconnaitre les fideles qui reviennent regulierement. Afficher le nombre de 
visiteurs sur votre page rangerait votre site dans les antiquites encore en 
ligne. Par contre, un visiteur sera flatte d' avoir ete remarque comme etant 
interesse par le theme du site et, eventuellement, d'avoir un petit privilege 
pour cette raison. 

L'application ici a une architecture savante. Voyez d'abord les lignes de 
code puis les differentes fonctions au fur et a mesure qu'elles sont 
appelees : 

var expiradate = new Date(); 
var visites; 

expdate.setTime(expi radate.getTime() + 

(24 * 60 * 60 * 1000 * 365)); 
if (! (visites = manger_biscuit("visites"))) { 
visites = 0; 

} 

el se { 
visites++; 
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ranger_bi scui t ("visi tes" , visites, expdate, "/", 
null, false); 

Les deux premieres lignes declarent et initialisent les variables expira- 
date et visites. 

Ensuite, chaque variable est nourrie. La variable expi radate repousse la 
date d'une annee. La variable visites est affectee du chiffre 0 ou 
incrementee selon le resultat ou non de l'appel a la fonction manger_bi s- 
cuit(). Le test porte sur le resultat de l'appel a la fonction. 



Le contenu de la propriete cookie 

La propriete cookie de I'objet cookie contient les paires 
nonpvaleur de tous les cookies disponibles pour cette page 
particuliere. En outre, chaque cookie contient des caracteristiques 
facultatives comme expires, la date d'expiration, path, le chemin pour 
lequel il est valide, domain, le domaine du serveur, secure, le drapeau 
securite (true ou f al se). Quand vous allez fouiller dans un cookie grace 
a document. cookie, vous avez une ou plusieurs paires nom=valeur. Le 
nom est celui du cookie et la valeur, sa valeur. La chaine obtenue est 
terminee par un point-virgule. Si la page ne dispose que d'un seul 
cookie, les paires sont separees par un point-virgule suivi d'un espace. 
Pour tester votre cookie, vous pouvez utiliser I'expression documen- 
t. write(document. cookie) ;. Ainsi vous afficherez son contenu. 



Voyez les fonctions. Les deux principales sont appelees dans les lignes de 
code precedentes : manger_bi scui t () et ranger_biscuit(). 

La fonction manger_bi scui t () recupere les donnees du cookie. L'argu- 
ment employe est le nom du cookie. Rappel : document. cookie est une 
chaine qui peut contenir un ou plusieurs cookies. 

La premiere partie de la fonction s' attache a identifier la longueur de la 
chaine qui suit I'expression nom= (c'est-a-dire le mot visites). Ici la 
variable qui contient la valeur du cookie prendra le nom $visites. 

Une premiere evaluation du cookie valide le fait que la taille du biscuit est 
plus grande que 0 au moyen d'un whi 1 e. Si ce n'est pas le cas, la fonction 
retourne null. 
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Dans le whi 1 e, la valeur de i est 0. Vous creez une variable j qui est egale 
a la longueur du nom (vi si tes) et du signe =. La methode substri ng () 
verifie que le premier nom est celui qui est en argument de la fonction ; 
si c'est le cas, la position du premier caractere de la valeur est envoyee a 
la fonction i ngredi ents_bi scui t ( ) , sinon i prend la valeur du mot qui 
suit immediatement l'espace, c'est-a-dire le nom du deuxieme cookie, et 
ainsi de suite jusqu'a ce que le test soit vrai. 




La methode substring() 

La methode substri ng() utilisee abondamment pour analyser 
la propriete cookie de I'objet document est nourrie par deux 
arguments : le premier donne la position du premier caractere et le 
second donne la longueur totale de la chame. 



function manger_biscuit (nom) { 
var arg = nom + " = "; 
var longueur_nom = arg. length; 
var tai 1 1 e_bi scui t = document. cookie. length; 
var i=0; 

while (i < tai 1 1 e_bi scui t) { 
var j = i + 1 ongueurjiom; 
if (document. cookie. substring(i , j) == arg){ 
return ingredients_biscuit (j); 

} 

el se { 

i = document. cookie. index0f(" ", i) + 1; 

} 

if (i == 0) { 
break; 

} 

} //fin du while 
return nul 1 ; 



Examinez maintenant la fonction manger_bi scui t () . 



function ingredients biscuit 


(debut mot) { 


var fin mot = 




document. cookie. indexOf (' 


; " , debut mot) ; 


if (fin mot == -1) fin mot = 


document . cooki e . 1 ength ; 


return unescape 
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} 



(document. cookie. substri ng (debut mot, fin mot)); 



Cette fonction recoit le debut du mot representant la valeur et en localisant 
le point-virgule en induit la longueur. Elle renvoie la valeur reconstitute 
avec la methode unescape(). 



Fichier £ditx>n Affchage Qutis Balises Actions Workspace Fenetre Aide 




return mgredients_biscuit 
= document . cookie . indexOf " 



return null 

function ranger_biscuit 'name, value] { 
vir arg_valeur ranger_biscuit . arguments 
var arg_nombre - ranger_biscuit. arguments . 



.ength: 



var expires = arg_nombre arg_valeur null 

var path ■ (3 < arg_nombre : 1 arg_valeur | 3 | ! null; 
var domain - [4 < arg_nombre | : arg_valeur [4 null 
var secure = I S arg_nombre i arg_valeur [5] : false 
document . cookie - name - - ascapa lvalue) ♦ 

l (expires - - null : " " i"; expire s= M - exp 
path == null) ? : ("; path=" - path)) • 



res . toGMTStrmg 



domain : null 
(secure = true 



{ " ; domam= 
secure" : 



- donam 



Preview Output SplitView §p 
I Jr ...it.js ■* s php * le php .* le php * n php Jr 2 php * 1 php Jt 1 php * ephp Jr. ephp 

if INS 



Figure 9.24 : Fonction ranger_biscuit() 



La derniere fonction a pour objectif de creer ou de modifier le cookie. 

function ranger_biscuit (nom, valeur) { 
var arg_valeur = ranger_biscuit. arguments; 
var arg_nombre = ranger_biscuit. arguments. length; 
var expires=(Z<arg_nombre) ? arg_val eur[2] : null; 
var path = (3 < arg_nombre) ? arg_val eur[3] : null; 
var domain=(4<arg_nombre) ? arg_val eur[4] : null; 
var secure=(5 < argjiombre) ? arg_val eur[5] : false; 
document. cookie = nom + "=" + escape (valeur) + 
((expires == null) ? "" : ("; expires=" + 
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expi res. toGMTStri ng() ) ) + 
((path == null) ? "" : ("; path=" + path)) + 
((domain == null) ? "" : ("; domain=" + domain)) + 
((secure == true) ? "; secure" : ""); 

} 



Avec la detection du navigateur 

En outre, JavaScript permet de detecter un navigateur. 

var nom = navigator. appName; 

var version = parselnt(navigator.appVersion) ; 

var IDnavigateur = navigator. userAgent; 

var navigateur = 0; 

i f (nom. i ndexOf ("Expl orer")>0) { 

if (version >= 4) navigateur= 1; else navigateur=2; 

if (IDnavigateur. indexOf ("MSIE 5.0")>0)navigateur=2; 

} 

if (navigateur ==0) { 
var balise ='<link href="generique.css" 
rel="stylesheet" type="text/css" />\n"; 

} 

el se { 

var balise ='<link href="generique_IE.css" 
rel="stylesheet" type="text/css" />\n"; 

} 

document. write (balise); 

Le programme teste le nom et la version du navigateur et recrit la balise 
qui conduit a la feuille de style adequate. 

Le modele objet de document (DOM) et AJAX 

Le DOM (Document Object Model) est un arbre avec une hierarchie 
descendante a partir de Fobjet document. II est materialise par les 
differentes balises du document HTML, XHTML et XML. La structure 
interiorisee dans le modele est constitute de balises qui se cotoient et qui 
contiennent parfois d'autres balises. Ainsi tout le document est contenu 
dans les balises <html> et </html>, qui contiennent les balises head qui 
contiennent les balises title et les balises <meta http-equiv= 
"Content-Type" content="text/html ; charset=iso-8859-l"/> et 
<link rel="stylesheet" href="feui 1 le.css" type="text/css" 
/>, tandis que la balise body est la balise frere de la balise head puisque 
ces deux balises sont au meme niveau dans la hierarchie. 
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Pour bien comprendre, il faut bien avoir l'arbre complet dans la tete et le 
visualiser. C'est un arbre genealogique : ainsi head est un descendant de 
html , un frere de body, un pere de 1 i nk et de meta. 

Les elements sont appeles des nceuds (nodes) en reference au langage 
XML qui est a l'origine de ce modele. Les noeuds au-dessus du nceud 
courant sont appeles les ancetres et les nceuds au-dessous sont les 
descendants. Chaque nceud se positionne dans l'arbre relativement aux 
autres nceuds. 

AJAX 

AJAX est vraiment au carrefour des langages du Web. II utilise des 
passerelles entre le XML, le JavaScript, les CSS et d'autres langages 
comme PHP, Java, Ruby, etc. Des applications existent pour transformer 
des objets d'un langage a l'autre afin de les fournir a l'API JavaScript du 
navigateur qui pourra les manipuler. L'interet du JavaScript est qu'il agit 
directement sur la page sans demander d'autres manipulations et les 
changements se font a vue. Le DOM permet d'envoyer les donnees 
retournees, dans un element de l'arbre HTML, c'est-a-dire a un endroit 
precis dans la page. Ces techniques evitent de sollicker le serveur a 
chaque requete et de faire travailler le navigateur sur le PC client sur des 
donnees serveur chargees en meme temps que la page. 

Au depart, JavaScript tournait sur lui-meme : il etait impossible de charger 
des donnees non incluses dans la page. Tout est parti de la classe 
JavaScript Xml HttpRequest, creee par Microsoft, a partir de la ver- 
sion 4.0 d'lnternet Explorer, puis adoptee par les autres navigateurs. 

Le principe d'AJAX (Asynchronous JavaScript And XML) est de pouvoir 
envoyer des requetes et de les afficher sans recharger la page. La page 
devient alors une application. AJAX est une combinaison de technolo- 
gies : HTML et CSS pour la presentation, DOM, qui transforme chaque 
element de l'arbre en objet, et JavaScript avec l'objet XMLHttpRequest 
pour gerer les requetes et les reponses. Asynchrone signifie que l'appli- 
cation, une fois la requete envoyee, n' attend pas la reponse mais poursuit 
son processus et affiche la reponse quand elle se presente. 
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Le nom de chaque propriete est ecrit a la maniere JavaScript. Ainsi 
font-size devient fontSize, et background-color, 
backgroundColor, etc. 

Voici une liste d' instruments de musique : 
<ul> 

<li>le viol on</l i> 
<li>le piano</li> 
<li>la guitare</li> 
</ul> 

L' element parent est la balise ul dont les enfants sont les balises 1 i et les 
petits-enfants les noeuds texte de 1 i , autrement dit leur contenu (le violon, 
le piano, la guitare). 



Flchier Edition Affichage Al 

• le violon 

• le piano 

• la guitare 

V 

Termine 



Ce modele DOM permet d' identifier les nceuds ou balises et done d'agir 
dessus individuellement ou collectivement en adressant une commande a 
tous les noeuds de meme niveau ou a tous les descendants d'une balise. 
Ces commandes peuvent influer sur le contenu d'un nceud ou sa position 
d'une maniere dynamique. Avec les CSS, il est possible de masquer un 
noeud ou de le transformer, ou encore de le faire apparaitre par un 
evenement comme : hover. 



Fichier Edition Affichage Altera [ 

Grand titre 



| Mettl e le titr^en orange | 

Termine 



•* i-igure 9. a : 

Liste non ordonnee 



< ngure y.zb 

Titre noir 
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<hl id="titre" class="titraille">Grand titre</hl> 

<button oncl ick="<button onclick^ 
"document .get El ementById( ' titre ' ) 
.style. col or = 'orange'; "> 

Mettre le titre en orange</button>">Hettre le titre en orange 
</button> 
</body> 
</html> 



Fichier Edition Affichage Allera Marqu 
® 3 ok |G! 



Grand titre 



M 



ettre le titre e[' orange 



Termine 



< Figure 9.27 : 

Titre orange 



L'element peut etre designe par son identifiant (get El ementByld), par la 
valeur de son attribut name (getEl ementByName) ou par le nom de sa 
balise (getEl ementByTagname). Ici, le fait d'appuyer sur le bouton 
colorie le titre en orange sans que la page n'ait besoin d'etre rechargee. 



<!D0CTYPE HTML PUBLIC "-//W3C//DTD 




HTML 4.01 Transitional//EN"> 




<html xheadxt i 1 1 e>Test</ti tl e> 




<script type="text/javascri pt"> 
<!-- 




function contraste() { 




document .getEl ementsByTagName("body"; 


[0] 


.setAttribute("bgColor", "white") ; 




document .getEl ementsByTagName("body"; 


[0] 


.setAttribute("text", "black") ; 




} 

//"> 




</scri ptx/head> 




<body bgcolor="#FFFFCC" text="#E00000 


> 


<button onClick="contraste()">En noir 


et bl anc</button> 


</prex/form> 




</bodyx/html> 
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< Figure 9.28 : 

En noir et blanc: 1 1 Noir et b l anc 



Ce bouton permet de rendre un site plus lisible en ce sens qu'il affecte un 
fond blanc et des caracteres noirs a la page. Le premier element 
body ([0] ) est vise. La methode setAttri bute() donne une valeur a un 
attribut ou une propriete. 

<html> 
<head> 
<script> 

function changeStyle() { 

c = document. getElementById("cel 1 ul e") ; 

c. style. width = "250px"; 

} 

</script> 

<table border="l"xtr> 

<td id="cel 1 ul e">C 'est la cellule</tdx/tr> 
</tabl e> 
<form> 

<input val ue="el argi r" 
type="button" 

oncl ick="changeStyl e() ; " /> 
</form> 
</html> 

Ici on insere une propriete width avec get El erne nt By Id () et la fonction 
comprend deux lignes de code. II est meme possible de remplacer du texte 
dans la page, toujours sans la recharger. Dans le petit programme suivant, 
une question est posee et la reponse donnee via le menu deroulant du 
formulaire declenche, par l'evenement onChange, V execution de la 
fonction. Selon la reponse, la page affiche "Encore une fois .'" ou 
"Bravo !" et le changement se fait a vue. 



Quel est la ,_ 

Encore 
couleur de . . 
,. , . une fois! 
I ocean ? 



Choisissez 

i Rouge | * 



-« Figure 9.29 : 

Mauvaise reponse 
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<htmlxheadxti tl e>Test</ti tl e> 
<script type="text/javascri pt"> 
<!-- 

function reponse() { 

ind_choix=document.forms[0] . choix. selected Index; 
val eur_quatre=document . forms [0] 
.choix. opt ions[ind_choix] .value; 
if (val eur_quatre== ' 4' ) { 

var noeud_texte = document. createTextNode("Bravo! ") ; 

} 

else { 

var noeud_texte = document. createTextNode("Encore une fois!"); 

} 

document .get El ementById("l areponse") 
. repl aceChi 1 d (noeud_texte , document 
.get El ementById("l areponse") . f i rstChi 1 d) ; 

} 

//--> 

</scriptx/head> 
<body> 

<table border="l" bgcolor="#FFFFC0" width="30%"> 
<trxtd id="zl">Quel le est la couleur de 1 'ocean ?</td> 
<td id="l areponse">c,a depend!</tdx/tr> 
</tabl e> 
<P> 

<form action="#" method="post"> 
Choisissez <br /> 

<select name="choix" size="l" onChange="reponse() "> 

<option value=""x/option> 

<option val ue="l">Bl anc</option> 

<option val ue="2">Noi r</option> 

<option val ue="3">Rouge</option> 

•coption val ue="4">Bl eu</option> 

<option val ue="5">Jaune</option> 
</select> 
</form> 

</bodyx/html> 



Quel estjta 




couleur de 


Bravo! 


I'ocean ? 





Choisissez 
Bleu - 



-* Figure 9.30 : 

Bonne reponse 
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Toutes ces applications sont du DHTML utilisant le JavaScript et le DOM 
et parfois les CSS comme dans les menus dynamiques. 

Un menu dynamique 



Rchier Edition Affichage Aller a Marque-pages Ouflls ? 
0 3 • - & ^ S http://css.maxdesign.com.au ' ©OK O, 



listamatic one list, many options 
Home Listamatic Listamatic2 Listutorial Floatutorial Selectutorial 



Can you take a simple list and use different Cascading Style 
Sheets to create radically different list options? The Listamatic 
shows the power of CSS when applied to one simple list. 



CSS S Javascript workshop 



▲ Figure 9.31 : Listamatic 



Vous pouvez realiser facilement un menu en allant sur des sites comme 
http://css.maxdesign.com.au/listamatic/, qui presente toutes les 
facons de creer un menu dynamique, ou www.accessify.com/tools- 
and-wizards/developer-tools/list-o-matic/, qui genere le code 
d'un menu dynamique a partir d'un formulaire et de quelques choix de 
types de menus. Les possibilites vont du menu simple, avec juste un 
: hover au passage de la souris, au menu dynamique, qui s'enroule et se 
deroule, parfois avec l'aide du JavaScript (voir Figure 9.32). 

Voici un menu en cascade que le site www.ibilab.net propose sur sa 
page www. i bi 1 ab.net/webdev/exempl es/menuencascade-exempl e2 
.htm. Ce menu a ete adapte et implemente sur le site biobearn.com par la 
graphiste Isabelle Godard (www.godarisa.com) (voir Figure 9.33). 
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Ftdw DJOon Aftchagt Ma a Mmojtvga Ouffc I 

& * & "I* ■ nop /fwww *c<«s*y cc*n/ b_ » C. 

Skip to search box | Skip to page heading and content | SMp to navigation 



Tools, w/zorxls. articles and tutorials on Web Accessibility forth* 
conscientious web developer 

Starch Ga » 

List-O-Matic 



'ri.tJar sf tap 



Subvert* for 
upd«t*t by mmmi 



Subscribe now » 

Termn* 



How many links 
do you want in 
your list? 
Include title 
attributes in 
links? 



ITS 



0 Yes 
please - 

I titles 



▲ Figure 9.32 : Accessify 



Fichier Edition Affichage Aller a Marque-pages OuQIs ? 

tflivuyarn r«b uui rb ei Fveiesr 
>> Lire la suite 




Le site fait penu nenve 

Une petite refonte graphique et technique du 

site ;) 

>> Lire la suite 



(.'reei' des jneinis en cascade, 
e'est .siiii|>W* ! 

Contrairement a ce que Ton pourrait croire, 
creer des menus en cascade est relativement 
simple. II suffit d'un simple melange de 
(X)HTML, de CSS et d'une touche de 
news extemes JavaScript pour obtenir des menus utilisables 
raechargemen dans n'importe quel contexte. 



Lien: 
Contact 



>> Lire la suite 



H http://www.ibilab.net/webdev/articles/CS5/creer-menus-cascade-simple-4.htm 



a Figure 9.33 : Ibiliab 
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Ce menu utilise du JavaScript et la propriete display avec les valeurs 
none et block pour afficher ou masquer le contenu des menus. Ces 
derniers sont places horizontalement et deroules verticalement. 



Rchier Edition Affichage Aler a Marque-pages OutSs 



Gjo JarjisJ.coJ 



WebDesign : creation de chartes graphiques de sites 
internet et CD-Rom, animations Flash, decoupe, 
optimisation d'lmages, integration html 

PAO : maquettes, exe. photogravure 

Logicitls : Dreamweaver . Flash, ImageReady. 
Fireworks, Photoshop, Illustrator, XPress 

Freelance, inscrrte a la malson des artistes 



Version Flash Mon CV en PDF 



[r~* Termhe 



Figure 9.34 : Godarisa 



Dans ces menus, on utilise le DHTML, le HTML dynamique compose de 
CSS, de JavaScript, de DOM. Les methodes JavaScript getEl ementsBy- 
TagName() et getElementById() agissent directement sur des elements 
de l'arbre DOM, la premiere par le biais du nom de la balise et la seconde 
par le biais de l'identifiant de F element. 



<!-- modele de menu sur : http://www.ibilab.net --> 

<script type="text/javascri pt"> 

<!-- 

function hover(obj){ 
i f (document .al 1 ) { 
UL = obj .getEl ementsByTagName( ' ul 1 ) ; 
if(UL. length > 0){ 

sousMenu = UL[0]. style; 
if (sousMenu. display == 'none' || sousMenu. display == ''){ 
sousMenu. display = 'block'; 
}else{ 

sousMenu. display = 'none'; 
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} 

} 

} 

} 

function setHover(){ 

LI = document .getEl ementByld ( 'menu 1 ) 
.get El ementsByTagName( ' 1 i ' ) ; 
nLI = LI. length; 
for(i=0; i < nLI ; i++) { 

LI [i] .onmouseover = function(){ 
hover(thi s) ; 

} 

LI [i] .onmouseout = function() { 
hover(thi s) ; 

} 

} 

} 

function MM_swapImgRestore() { //v3.0 

var i ,x,a=document.MM_sr; for(i=0;a&&i<a 
. 1 ength&&(x=a[i] )&&x.oSrc;i++) x.src=x.oSrc; 

} 

function MM_prel oadlmages () { //v3.0 
var d=document; if (d. images) { if(!d.MM_p) d.MM_p=new ArrayO; 

var i , j =d . MM_p .length, a=MM_prel oadlmages . arguments ; 
for(i=0; i<a. length; i++) 

if (a[i] .indexOf ("#") !=0) { d.MM_p[j]=new Image; 
d.MM_p[j++] .src=a[i] ;}} 
} 

function MM_f indObj (n, d) { //v4.01 
var p,i,x; if(!d) d=document; 

s-= if ((p=n.indexOf ("?"))>0&&parent. frames. length) { 
d=parent .frames [n. substring (p+1)] .document; 
n=n.substring(0,p) ;) 

if (! (x=d[n])&&d.all) x=d.all[n]; 
for (i=0; !x&&i<d. forms. length;i++) x=d. forms [i] [n] ; 

f or ( i =0 ; ! x&&d . 1 ayersMi <d . 1 ayers . 1 ength ; i ++) 

3-= x=MM_findObj (n,d.layers[i] .document) ; 

if(!x && d.getElementByld) x=d.getElementById(n) ; return x; 

} 

function MM_swapImage() { //v3.0 

var i ,j=0,x,a=MM_swapImage.arguments;document.MM_sr=new Array; 
for(i=0;i<(a.length-2) ;i+=3) 

if ((x=MM_findObj (a[i])) !=nul 1 ) {document .MN_sr[j++] =x; 
if(lx.oSrc) x.oSrc=x.src; x.src=a[i+2] ;} 

} 

//--> 
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</script> 

<link href="menu.css" rel ="styl esheet" type="text/css"> 
<link href="biobearn.css" rel ="styl esheet" type="text/css"> 
<style type="text/css"> 
<!-- 
body { 

background-image: url ("images/fond. gif") ; 
background-repeat: repeat; 

} 

a { 

font-size: small; 
color: #339999; 

font-family: Arial, Helvetica, sans-serif; 

} 

a: vi si ted { 
color: #339999; 

} 

a:hover { 
color: #cc6699; 

} 

a:active { 
color: #cc6699; 

} 

--> 

</style> 
</head> 

<body onl_oad="setHover() ; 
MM_prel oad Images ( ' i mages/menu/menu l_on.gi f ' 
, ' i mages/men u/menu2_on.gi f ' , ' images/menu/menu3_on.gi f 1 
, ' i mages/men u/menu4_on.gi f ' ) "> 
<table width="100%" border="0" eel 1 padding="0" 
eel 1 spacing="0"> 
<tr> 

<td al ign="center" val ign="middl e"xtabl e width="760" 
border="0" eel 1 paddi ng="0" eel 1 spaci ng="0" el ass="fondmenu"> 
<tr> 

<td al i gn=" 1 eft" val ign="top"> 
<ul id="menu"> 
<!-- logo --> 
<li el ass="f i rst"> 
<a href="index.php"> 
<img src="images/menu/l ogo_page.gi f " 
width="140" height="35" hspace="0" 
vspace="0" border="0" cl ass="f i rst"x/a> 
</li> 

<!-- salade --> 
<li class="two"> 
<img src="images/menu/menul_salade.gif " width="40" 
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height="35" hspace="0" vspace="0" border="0"> 

</li> 

<!-- debut du premier menu --> 

<li cl ass="three"> 
<a href="#" onMouseOut="MM_swapImgRestore() " 
onMouseOver="MM_swapImage( ' boutonl 1 , 1 1 
, 1 i mages/men u/menul_on.gi f 1 , 1) "> 
<img src="images/menu/menul_off .gi f " name="boutonl" 
width="89" hei ght= "35 " hspace="0" vspace="0" border="0"x/a> 

<ul onMouseOver="MM_swapImage( ' boutonl ' , 1 1 
, ' i mages/men u/menul_on.gi f ' , 1) " 
onMouseOut="MM_swapImgRestore() "> 

<1 ixa href="impl antation.php"xspan>Impl antations</span> 
</ax/l i> 

<1 ixa href="presentation.php"xspan>Présentation 

</spanx/ax/l i> 

<1 ixa href="promo.php"xspan>Promos</spanx/ax/l i> 
<1 ixa href="service.php"xspan>Services</span> 
</ax/l i> 
</ul> 
</li> 

<!-- fin du premier menu --> 

La feuille de style joue sur le pseudo-element : hover qui est relaye par 
Fevenement JavaScript onMouseOver a cause des incompatibilites d'ln- 
ternet Explorer. Certains proprietes sont destinees a Internet Explorer, 
comme _di spl ay : i nl i ne (notez le blanc souligne initial). 




a Figure 9.35 : Bio Beam 
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ul #menu 


li ul{ 


display:none; 

} 


ul #menu 


1 i : hover ul { 


display:block; 

} 


ul #menu{ 




margir 


:0px; 


padding:Opx; 


1 ist-style:none; 


float: 


left; 


font:smal 1 Arial ; 

} 


ul ftnenu 


m 


float: 


left; 


display:block; 


} 




ul #nienu 


1 i . f i rst{ 


width: 

} 


140px; 


ul #menu 


1 i .two{ 


width: 

} 


40px; 


ul #menu 


1 i .three{ 


width: 


89px; 


} 

ul #menu 


li.forf 


width: 


32px; 


} 




ul #menu 


1 i . f i veseven{ 


width: 

} 


99px; 


ul #menu 


1 i .six{ 


width: 


35px; 


} 




ul #menu 


1 i . heigt{ 


width: 


59px; 


} 

ul ftnenu 


1 i .nine{ 


width: 

} 


84px; 


ul ftnenu 


li.ten{ 


width: 

} 


83px; 
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ullmenu li a{ 
display:block; 
color:#339999; 
text-decoration: none 

} 

ulftnenu li a:hover{ 
color:#CC6699; 

} 

ul #menu ul { 
position:absolute; 
background:#CCFFCC; 
1 ist-style:none; 
margin:Opx; 
padding:Opx; 
width :140px; 
z-i ndex: 1 ; 

} 

ulftnenu ul li{ 
position:relative; 
float:none; 
margin:Opx; 
padding:Opx; 
_di spl ay :inl ine; 

} 

ulftnenu ul li a{ 
display:block; 
margin :0px; 
padding:Opx; 
border:none; 

1 

ul#menu ul li a span{ 
display:block; 
padding: lpx lpx; 
border:none; 
cursor: hand; 

} 

ul#menu ul li a:hover span{ 
color:#CC6699; 
border:none; 

} 

.fondmenu { 

background-color: #ccffcc; 



768 • Double Poche CSS 



Le PHP 



background-image: url ("images/menu/menu_fond.gif") ; 
background-repeat: no-repeat; 

} 

Un jour peut-etre, il sera possible de creer ce genre de menu deroulant, 
au-dessus de la page, uniquement a l'aide des CSS, sans aucun apport 
d' autre langage. 

9.2 Le PHP 

Le PHP est principalement un langage de script qui est melange au code 
HTML pour executer des commandes avant que le fichier HTML soit 
presente au navigateur. Le code PHP est execute par le serveur avant que 
le navigateur ne presente la page a l'internaute. Comme le resultat de tout 
cela est que tout le contenu de la page est du HTML, n'importe quel 
navigateur peut 1' interpreter. 

D'autres langages de script existent, comme ASP, JSP mais PHP est un 
langage open source simple d'approche, avec des developpements qui 
permettent une grande souplesse dans des situations inedites. A l'instar de 
Java, il integre la programmation objet et, comme il est beaucoup diffuse, 
de nombreux outils PHP particulierement bien adaptes pour le Web sont 
developpes. Comme il est gratuit, quasiment tous les hebergeurs web le 
propose. 

Le PHP est fonde sur les phrases, a la maniere d'un langage naturel. Le 
type par defaut est string (voir Figure 9.36). 

Sans hebergeur, il est possible d'installer l'application EasyPHP. La 
procedure est simple. Telechargez le logiciel sur www.easyphp.org puis 
un clic suffit pour installer le serveur Apache, le moteur PHP le plus recent 
et la base de donnees MySQL accompagnee de l'outil d' administration 
PHPmy Admin. Sous Windows, vous avez deja un serveur web installe : 
IIS. Si vous rencontrez un probleme pour afficher la page d'accueil 
d'EasyPHP, c'est souvent a cause d'un conflit avec IIS, le serveur de 
Windows. II suffit alors de le desactiver. De meme, des logiciels pare-feu 
comme ZoneAlarm, par ailleurs utiles, peuvent empecher Faeces a la page 
du logiciel d' administration de la base MySQL, PHPmy Admin. Dans la 
plupart des cas, EasyPHP ne pose aucun probleme. 
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a Figure 9.36 : EasyPHP 



Ma page 

Ouvrez votre traitement de texte ou d'edition de code. Entrez les balises 
obligatoires <htmlx/html>. Al'interieur, ajoutez les balises qui com- 
posent les deux parties d'une page : l'en-tete <headx/head> et, au- 
dessous, les balises <bodyx/body>. Vous obtenez une page blanche. 
Maintenant, ajoutez un titre dans les balises <headx/head>, qui appa- 
raitra comme une enseigne dans l'en-tete du navigateur : <title>Le 
club</title>. 

La page est encore vide. Vous allez vous presenter. Entre les balises 
<bodyx/body>, ecrivez je m'appelle. 

Saisissez maintenant votre premier code PHP. Le code PHP doit etre 
entoure des balises <? ?> (ou parfois <?php ?> ou <% %>). Avant la 
balise <html >, inserez votre premiere variable. 

<? 

$mon_nom="Franc:oi s" ; 

?> 



770 • Double Poche CSS 



Le PHP 



Le caractere $ devant un mot indique qu'il s'agit d'une variable. Une 
variable est un espace de memoire vive alloue a une information. 
Donnez-lui de preference un nom comprehensible. mon_nom signifie 
da vantage qu'une adresse memoire avec du code informatique. Quand 
vous relirez votre programme, vous saurez qu'il s'agit du nom de 
quelqu'un. Ici, l'espace souligne remplace l'espace, qui ne doit pas figurer 
dans un nom de variable. 

Le caractere "egal" cree une affectation. Les guillemets indiquent au 
moteur PHP qu'il s'agit d'une chaine de caracteres et le point-virgule 
ferme la commande. La commande peut s'etaler sur plusieurs lignes. Le 
point-virgule indique au moteur que ce qui a precede est une unite, un 
ordre d'execution. L'affectation consiste a affecter une valeur a une 
variable. Ainsi, l'espace memoire appele mon_nom recoit la valeur 
Frangoi s. 



Le caractere ega" 

Le fait que les premiers concepteurs de programmes aient 
choisi le caractere egal (=) pour caracteriser l'affectation d'une 
valeur a une variable entratne souvent la confusion avec le test d'egalite 
qui, lui, est signale par un double egal(==). Certains bogues sont dus a 
cette confusion, surtout dans les tests avec if. 



Enregistrez maintenant votre page dans le repertoire club a l'interieur du 
repertoire www du dossier d'EasyPHP sous le nom index.php. Puis ouvrez 
votre navigateur web et cliquez du bouton droit sur la petite icone 
d'EasyPHP dans la barre de taches de Windows. Un menu apparait. 
Selectionnez Web local et cliquez sur le repertoire club. Rien n' apparait, 
juste une page blanche. Vous avez cree une variable mais ne l'avez pas 
affichee sur l'ecran. Pour cela, inscrivez <? echo $mon_nom ?> en 
dessous de la balise body. Remarquez l'omission du point-virgule. En fait, 
la balise ?> signale la fin de la commande et le point-virgule est ici 
optionnel. 

Maintenant, vous avez plusieurs methodes pour ajouter le nom : 
■ Premiere solution : 

$mon_nom= " Frangoi s Rabelais"; 
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■ Deuxieme solution : 

$mon_nom="Fran<:oi s" . " " . "Rabel ai s" 

■ Troisieme solution : 

$mon_nom = "Frangois"; 
$mon_nom =$mon_nom." Rabelais"; 

■ Quatrieme solution : 

$mon_nom = "Frangois"; 

$mon nom="$mon nom Rabelais"; 



■ Cinquieme solution : 

$mon_nom = "Frangois "; 
$mon_nom. =" Rabel ais" ; 

Ces cinq solutions donnent le meme resultat : Francois Rabelais. 



Fichier Edition Affichage All 



Francois Rabelais 

Termine 



■* Figure 9.37 : 

Frangois Rabelais 



Passons maintenant aux explications. 

$mon_nom="Frangoi s Rabelais"; est une chaine de caracteres. Vous 
ecrivez comme d'habitude, en langage naturel, avec un espace entre les 
mots. 

$mon_nom="Frangoi s" . " " . "Rabel ais" ; introduit la fonction de conca- 
tenation, exprimee par le point. Cette fonction assemble trois troncons, 
espace inclus. Les guillemets, comme les apostrophes, indiquent que la 
valeur est de type string. Dans certains langages, vous devez toujours 
preciser le type d'une donnee et il est malaise de faire passer une donnee 
d'un type a un autre, ce qui n'est pas le cas en langage PHP. II reconnait 
de lui-meme le type de la donnee. 
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II existe des differences entre une paire de guillemets et une paire 
d' apostrophes. Par exemple, si vous ecrivez $mon_nom= ' $mon_nom Ra- 
belais' au lieu de $mon_nom="$inon_noin Rabelais", vous affichez 
litteralement $mon_noin Rabel ai s. La variable n'a pas ete extrapolee. Elle 
a ete prise pour un mot commencant par le caractere "dollar". 

Les variables scalaires 

Les variables scalaires contiennent une seule valeur, par opposition aux 
tableaux qui en contiennent plusieurs. 

Le nom des variables 

Un nom de variable qui represente une valeur ou un ensemble de valeurs 
doit commencer par une lettre ou un blanc souligne (_), suivi de lettres, de 
chiffres ou de blancs soulignes. Attention, le langage PHP distingue la 
casse dans les nom de variable. Ainsi $Fromage et $fromage sont des 
variables differentes. 

\ 

Choix du nom des variables 

Soyez coherent dans le choix du nom des variables. L'objectif 
est d'obtenir un nom evocateur, mais pas trop long. $nbre_bou- 
teille est aussi significatif que $nombre_de_bouteilles mais vous 
aurez moins de caracteres a saisir a chaque fois que vous I'utiliserez. 
Soyez rigoureux dans vos criteres de nommage. Evitez les capitales car 
vous risquez d'oublier que vous les avez employees et d'engendrer 
ainsi une erreur avec une variable inexistante. Notez que le nom d'un 
champ de formulaire sert aussi a nommer la variable qui en est issue ; 
soyez rigoureux aussi sur le choix de ces noms de champ. 

La valeur des variables scalaires peut etre de plusieurs types. II est bon de 
connaitre ces derniers meme si, en general, le langage PHP fait le travail 
a votre place dans la plus grande transparence. 
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Le type des variables 



Tab. 9.3: Les differents types de variables 


Type 


En fran^ais 


Exemple 


integer ou int 


Entier 


45 


float 


Nombre a virgule 


45.2 


string 


ChaTne de caracteres 


"J'veux faire du 
PHP!" 



boolean ou bool Booleen falseoutrue 



Les variables en langage PHP sont typees implicitement. Ainsi, PHP 
reconnait un chiffre ou des lettres et le point du nombre a virgule flottante. 
II vous laisse cependant la possibility de forcer le type : 

$code_postal ="06400"; 
$code_postal = (int)$code_postal ; 

Ici, la variable $code_postal , qui serait naturellement une chaine de 
caracteres a cause des guillemets, peut etre transtypee en nombre. Le 
forcage du type en i nt lui enleve le 0 du debut. Par contre, si 06400 avait 
ete sans guillemets, le nombre aurait interprete comme un octal a cause 
du 0 initial et aurait done valu 3328 a la deuxieme ligne. Avec l'associa- 
tivite des operateurs, le sens du traitement de 1' affectation et du transty- 
page est de la droite vers la gauche. La variable $code_postal est done 
ici transtypee en integer puis affectee a elle-meme : elle n'a plus rien 
d'un code postal. Faites bien la difference entre un chiffre et un nombre, 
sinon, vous aurez des surprises. 

Les entiers 

Les variables de type entier sont assez simples a comprendre. 

Vous pouvez ecrire par exemple : 

$a=l; 
$b=2; 
$c=$a+$b; 
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En 1' occurrence, $c contient la valeur 3. 

Si vous mettez les valeurs 1 et 2 entre guillemets ou apostrophes, PHP 
devine qu'il s'agit de valeurs numeriques, et non de chaines de caracteres, 
grace a l'operateur +. II fera la somme des deux variables : 

$a=' 1' ; $b="2"; $c=$a+$b; 

PHP vous simplifie la vie en assumant ces taches de typage des donnees 
qui alourdissent inutilement le travail du programmeur et peuvent 
constituer une source d'erreurs. 

Les nombres a virgule flottante 

Mefiez-vous des f 1 oat, c'est-a-dire des nombres a virgule flottante, car ils 
sont sujets aux approximations dans les resultats. Si vous avez 
6.555973333 comme resultat d'une operation, l'ordinateur arretera le 
resultat sur une approximation pour eviter de generer un bogue de 
programme sans fin. 

En anglais, le point remplace la virgule utilisee en francais. 

Lesbooleens 

Pour specifier un booleen, vous pouvez utiliser false ou true (peu 
importe la casse). 

Les valeurs considerees comme false sont : 

■ le booleen fal se ; 

■ l'entier 0 (zero) ; 

■ le nombre a virgule flottante 0 . 0 (zero) ; 

■ la chaine de caracteres vide et le caractere 0 ; 

■ un tableau sans element ; 

■ letypenull (y compris les variables passees par la fonction unset ()). 
Les autres valeurs sont considerees comme true. 

Si la variable $variable a l'une des valeurs false precedentes, 
1'evaluation du test if (!$variable) est true. Par ailleurs, if ($varia- 
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bl e) est true si la variable existe et qu'elle soit differente de 0, de nul 1 
ou de "". Si elle vaut " ", l'expression renvoie aussi la valeur true. 

Les chaines de caracteres 

Le type stri ng est de loin le plus utilise. Les espaces sont significatifs a 
l'interieur d'une chaine de caracteres. Elle est encadree par des guillemets 
droits ou doubles (guillemets anglais). 

Creer un aiguillage de feuilles de style 

Une solution de rechange quand on ne trouve aucune autre solution est de 
creer une feuille de style pour chaque navigateur. C'est quand meme une 
solution extreme car elle ne repond plus aux criteres qui conduisent a 
l'emploi des CSS. La maintenance est plus malaisee car il faut alors 
modifier plusieurs feuilles de style et les valider, ce qui peut prendre du 
temps. II existe quand meme des situations ou le developpeur doit sortir 
une nouvelle version de son site rapidement. II lui reste alors cette 
solution. 

II faut commencer par nommer toutes les pages avec l'extension .php et 
modifier les liens en consequence. 

<!D0CTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 

Transitional //EN"> 

<html> 

<head> 

<title>Ecoute s'il pleut : Un sejour magique en toute 
liberte! Accueil</title> 

<meta http-equiv="Content-Type" content="text/html ; 
charset=iso-8859-l" /> 

<? 

if (eregi ('msie 1 , $HTTP_USER_AGENT) && ! eregi ( 'opera 1 , 
$HTTP_USER_AGENT) ) 

{ 

// Internet Explorer 

echo '<link href="ie.css" rel="stylesheet" 

type="text/css" />'; 

} 

elseif (eregi ('opera 1 , $HTTP_USER_AGENT) ) 
{ 

// Opera 

echo '<link href="opera.css" rel ="styl esheet" 
type="text/css" />'; 
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} 

elseif (eregi ('Mozilla/4. 1 , $HTTP_USER_AGENT) ) 

{ 

// Netscape 4.x 

echo '<link href="ns4. ess" rel ="styl esheet" 

type="text/css" />'; 

} 

elseif (eregi ('Mozilla/5.0', $HTTP_USER_AGENT) && 
! eregi ( 1 Konqueror' , $HTTP_USER_AGENT)) 

{ 

// Netscape 6 

echo '<link href="ns6.css" rel = "styl esheet" 

type="text/css" />'; 

1 

el se 

{ 

// Autres navigateurs 

echo '<link href="defaut.css" rel="stylesheet" 
type="text/css" />'; 

I 

?> 

</head> 

L'aiguillage est cree avec des i f . La variable d'environnement $HTTP_U- 
SER_AGENT est testee. Selon les caracteres qu'elle contient, le lien vers la 
feuille de style est recrit dynamiquement. 

Tout ce code sera cache dans la feuille de style, seul le resultat sera visible. 

9.3 Le XML 

Le XML est, comme le HTML, un descendant de l'ancetre du langage 
Internet : le SGML. Ce dernier etait tres complique a mettre en ceuvre. II 
a donne naissance a des simplifications sous la forme du HTML puis du 
XML. Le HTML est devenu un langage de description de page tres libre. 
Ainsi les balises HTML peuvent etre mises en capitales ou en minuscules. 
La balise d'ouverture peut etre en capitales et celle de fermeture en bas de 
casse. Par ailleurs, une balise d'ouverture peut ne pas comporter de balise 
de fermeture, comme la balise <p>. La concurrence entre les differents 
navigateurs a encore ajoute de la confusion, chacun creant ses propres 
balises. En outre, le Web s'est diversifie, se repandant sur les telephones 
portables, les assistants numeriques. II a done fallu trouver un langage 
plus rigoureux qui permettait, a partir d'un meme contenu, de visionner 
des pages a F aspect different. 
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a Figure 9.38 : Le site XMLfr 



Aux debuts d'Internet, la simplicite et le manque de contraintes du HTML 
ont contribue a le repandre ires largement et rapidement a travers le 
monde et a en faire un standard. Quand les sites web ont grossi et sont 
devenus professionnels, le langage HTML a montre ses limites car, s'il 
caracterise la forme du document, il ne decrit pas le contenu de la page. 
Par ailleurs, il etait difficile de mettre a jour les pages et de s'y retrouver 
dans un code melangeant la forme et le contenu. 

Qu'est-ce que le XML ? 

C'est un langage dont les balises caracterisent le contenu. II est rigoureux 
et n'accepte aucune faute de syntaxe. Les balises d'ouverture et de 
fermeture doivent avoir la meme casse. Une balise solitaire doit etre 
accompagnee d'une barre oblique (par exemple, <br />). Comme les 
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CSS, le XML separe la presentation et les donnees. Un document (le 
fichier DTD) definit les balises et leur syntaxe, et facilite la construction 
et le debogage du fichier .xml conformement a cette DTD 

- ?;::tn t ve rs i:in='l .0' em:oding= ' S 0- y E: 5 y- 1 - 
<?xml-stylesheettype="textfxsl" href="index.xsl"?> 
<!D0CTYPE index SYSTEM "index.dtd"> 

<page> 

<paragraphe=<gras>Vous voufez un site sans surprise, tout compris, realise dans de moindres delais, simple a 
mettre a jour en toute independance ?</gras>«/paragraphe> 

<paragraphe><orange>Nos packs sontfaits pourvous «/orange><paragraphe> 

<paragrapne> Beneftciez de notre <gras>savoir-faire</gras> dans un site a <gras»vos couleurs</gras>.</paragraphe> 

«paragraphe> Vos clients etvos prospects feront une agreable visite sur voire espace grace a une navigation simple 
et directe.<paragraphe> <paragraphe» Si vous desirez une presence encore plus personnalisee nous pouvons 
concevoir votre site <gras»"sur mesure'Wgras> sur simple devis gratuit.</paragraphe> 

<paragraphe>Quel que soit votre choix, un grand nombre d'<gras>options<^gras> etde services adaptes a vos 
besoms, sont a votre disposition <j'paragraphp - 



▲ Figure 9.39 : Fichier XML 

Un document XML appelle plusieurs documents : 

■ un fichier avec une extension .xml, qui stocke les donnees avec les 
balises caracterisant chaque type de donnees ; 

■ un fichier XSLT (Extensible Stylesheet Transformations), avec l'ex- 
tension .xsl, qui est la feuille de style et qui decrit l'apparence de la 
page et la forme de chaque contenu ; 

■ un fichier .dtd, qui decrit la syntaxe, donne la structure du contenu et 
permet de deceler les erreurs ; 

■ un document qui appelle tous ces fichiers, en Foccurrence un 
document ecrit dans un langage dynamique, comme PHP ou Java, ou 
meme HTML avec du JavaScript insere. 

Dans le cas du XML, les navigateurs sont encore plus determinants pour 
le code. C'est le principal ecueil. 

La difference entre le XSLT et les CSS 

La principale difference entre le XSLT et les CSS est qu'un document 
XSLT contient du code qui agit directement sur les donnees et leur 
presentation, avec des modeles qui incluent des boucles et diverses 
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operations, comme la concatenation. Les modeles sont des unites de 
programme et de presentation. Le modele est d'abord appele : 

<xsl :template match="gras"> 
<bxxsl :val ue-of selects" . "/></b> 
</xsl : tempi ate> 

Cela se traduirait ainsi en CSS : 
.gras { 

font-weight: bold ; 
} 

Le fichier XSLT est un document XML qui integre le code XHTML avec 
des appels de modele : 

<td val ign="top"> 

<xsl :apply-templates sel ect="page/paragraphe"/> 
</td> 

A n'importe quel endroit dans la feuille XSLT, le modele appele est 
defini : 

<xsl :template match="paragraphe"> 
<p cl ass="courant"> 
<xsl :apply-templates/> 
</p> 

</xsl : tempi ate> 



La feuille de style qui l'accompagne definit les proprietes de courant : 



.courant { 






font-family: "Arial" 


, "Helvetica", 


"sans-serif"; 


font-size: 14px; 






color: #4087C1 
} 







La feuille XSLT est plus interessante que la feuille de style car elle offre 
plus de possibilites, meme si on peut raisonnablement penser qu'un jour 
elles se rejoindront (voir Figure 9.40). 



La feuille XSLT donne plus de latitude car elle agit sur la presentation des 
donnees, mais aussi sur leur repetition ou leur declinaison avec les 
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commandes XPath. Le XSLT possede aussi une recherche de motifs plus 
avancee. page/paragraphe cherche paragraphe qui est enfant de page. 



<?xml version="1 .0" encoding="ISO-8859-1"?> 

<xsl:stylesheetxrnlns:xsl="http:/Av*«.w3. org/1 999/XSUTransform" version="1 ,0"> 
<xsl:output method="html" encoding="ISO-8859-1"/* 



<xsl:template match=T> 

<htrnl ang="fr" >:ml:larig="fr" xrn I ns=" http://www.w3. org/1 999/xhtml"> 
■head' 

=: 1 1 1 1 e s Ac ce Elites '/titles 

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-17> 

<scriptlanguage= M JavaScripr><xsl:comment«![CDATA[ 

function MM_swaplmgRestoreO { //V3.0 

var ,>i,a=document.MM_sr; for(i=0;a&&i«a. length &&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc, 

) 

function MM_preloadlmagesO { //v3.0 

var d=document; if(d.images){ if(!d.MM_p) d MM_p=newArrayO; 
var i,j=d MM_p length, a=MM_preloadlmages. arguments; for(i=0; i<a. length; 
if (a[i].indexOffF)!=0){ d.MM_pO]=new Image; d.MM_pO++].src=a[i];}} 

( 

fun tion MMjlndObiin, dj l /jV4 0 

varp.i.x; if(!d) d=document; if((p=n.indexOfC'?"))>0&&parent.frames.length){ 
d= parent frames[n.substring(p+1)]. document; n=n. substrings, p);} 
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n], 
for(i=0;lx&&d layers&&i<d. layers. Iength;i++) x=MM_findObj(n,d.layers[i]. document), 
ifi:'!>i document getElementByld) x=document.getElementByld(n); return x; 

I 

function MM_swaplmageQ { //v3.0 

van,j=0,x,a=MM_swaplmage. arguments; document.MM_sr=newJrray; for(i=0;i<(a. length- 2);i*=3) 
if ((x=MM_flndObj(a[i]))!=null){document.MM_srO++]=x; iffJx.oSrc) x.oSrc=x.src; x.src=a[i+2];} 

I 

|]»«/xsl:comment> 
</script> 

^Tk^e_N^MesJiee^ 

▲ Figure 9.40 : FichierXSLT 



LefichierXML 

Le fichier XML est compose de deux parties complementaires. 



L'espace de nommage 

Commencez par declarer la version XML utilisee pour stocker les donnees 
ainsi que le type d'encodage. 



Double Poche CSS • 781 



9 Les CSS se marient bien 

<?xml version="1.0" encoding="IS0-8859-l"?> 

Ce type d'encodage permet de rendre correctement les caracteres propres 
a l'Europe occidentale. 

A la ligne suivante, declarez la DTD. 
<!D0CTYPE nomDTD SYSTEM "nom.dtd"> 

Nommez la DTD et indiquez le chemin vers le fichier ou FURL. Ensuite 
declarez le fichier XSLT qui mettra le fichier XML en forme. 

<?xml -stylesheet type="text/xsl " href="adherents.xsl "?> 

Les elements et les attributs 

Le fichier XML est forme de balises comme dans l'exemple suivant : 
<f i che> 

<img src="jeandupond. jpg"/> 

<prenom>Jean<prenom> 

<nom>Dupont</nom> 

<adresse>16, rue du Pont Loui s-Phi 1 ippe</adresse> 
<codepostal>75004</codepostal> 
<vi 1 1 e>Pari s</vi 1 1 e> 
</f i che> 

Chaque balise ouvrante renvoie a une balise fermante rigoureusement 
positionnee pour encadrer les donnees, excepte la balise img qui, ici, se 
termine par / du fait que c'est un element isole. Les balises sont nominees 
"elements" tandis que leurs proprietes, comme la propriete src de 
l'element img, sont appelees "attributs". L'element contient du texte. 

Le fichier XML doit avoir la bonne forme. Si vous choisissez des capitales 
pour nommer les balises, vous devrez vous y tenir, qu'elles soient 
ouvrantes ou fermantes. Vous allez done creer un fichier de DTD dans 
lequel vous consignerez les regies que vous appliquerez a vos balises. II 
servira a valider votre fichier et a reperer les erreurs de syntaxe. Vous 
pourriez ainsi decider que telle balise est obligatoirement a l'interieur de 
telle autre balise. 
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XHTML 

resultat 



XSLT 

construction des noeuds 



t 



XSLT 

mise en forme 



A Figure 9.41 : Processus XSLT 

Un fichier XML est un fichier brut de donnees, sans aucune presentation, 
mais ponctue de balises. II est accompagne d'un fichier XSLT. Ce fichier 
de presentation est parcouru et interpreted par une application serveur qui 
va fusionner les fichiers pour fabriquer une page qui sera soit un vrai 
fichier, soit Fecran par defaut. Le langage XSLT est deconcertant pour 
tout programmeur forme aux langages proceduraux ou orientes objet. II 
est base sur la creation de regies de modele (template) a partir du fichier 
source. Les transformations se font sur l'arbre resultat pour presenter les 
donnees d'une maniere lisible par tous. 

Le fichier XML est traite (parsed) par un analyseur XML qui est, par 
defaut, le module Expat. Ce fichier correspond au contenu de la page. 
C'est ce document qui sera modifie dans le cadre d'une mise a jour. 
Comme les balises sont explicites et le contenu ecrit sans codage, 
n'importe quel utilisateur connaissant deux ou trois regies saura modifier 
ce type de fichier sans dommages. 



Tab. 9.4 


: Codage des caracteres dans un fichier XML 


Caractere 


Codage 


Statut 


& 


& 


Obligatoire 


< 


tit; 


Obligatoire 


> 


tgt; 


Obligatoire 
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Tab. 9.4 


: Codage des caracteres dans un fichier XML 


Caractere 








&apos; 


A I'interieur d'un attribut delimite par des apostrophes 




" 


A I'interieur d'un attribut delimite par des guillemets 



Voici quelques regies : 

■ Les balises doivent etre de la meme casse, generalement en 
minuscules. 

■ Toute balise ouvrante doit etre accompagnee par une balise fermante. 

■ Le nom d'une balise ou d'un attribut doit debuter par une lettre ou un 
blanc souligne (_), suivi eventuellement par plusieurs lettres, chiffres, 
points, tirets ou blancs soulignes. 

■ Une balise sans contenu se termine par />, par exemple <br/> ou 
<br />. 

■ Les attributs sont entre guillemets ou entre apostrophes, par exemple 
<page numero="l">. 

■ Les balises ouvrantes et fermantes de differentes entites ne peuvent se 
chevaucher : elles doivent s'emboiter ou se suivre. 

■ Le caractere "guillemet" est code quand il appartient a un attribut 
delimite par des guillemets. 

■ Le caractere "apostrophe" est code quand il appartient a un attribut 
delimite par des apostrophes. 

■ Les noms de balise ou d'attribut ne peuvent contenir d'espace. 

■ Les balises ou les attributs ne peuvent avoir un nom qui commence par 
xml ou XML ou Xml , etc. 

L'auteur d'un fichier XML nomme les differentes balises de sorte que le 
sens du contenu soit explicite pour un utilisateur. 

<titre>Php & MySQL en ligne 
<sous-titre>L'essentiel pour concevoir 
un site web dynamique!</sous-titre> 

<col 1 ection reference="3679">e-poche</col 1 ectionx/ti tre> 
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Ce que nous venons d'enoncer est essentiel pour que le document XML 
soit dans une bonne forme. La DTD qui accompagne ce fichier permettra 
de le valider. 

La DTD 

La DTD est un document qui edicte les regies relatives aux entites 
composant le fichier XML, c'est-a-dire qu'elle decrit la succession et 
l'imbrication des elements et des attributs. 



Les differents types de declarations 

On declare les differents elements et attributs en decrivant leur contenu. 



Tab. 9.5 : Differentes declarations dans une DTD 






Declaration 




<! ELEMENT titre (#PCDATA)> 


L'element ti tre contient du texte traite. 


<! ELEMENT titre (sous-titre, 
collection)> 


L'element titre contient les elements 
sous-titre et collection. 


<! ELEMENT titre (sous-titre, 
collection+)> 


L'element ti tre contient l'element 
sous-titre et une a plusieurs balises 
col 1 ection. 


<!ATTLIST collection reference 
CDATA> 


L'element col 1 ecti on a comme attribut 
reference de type CDATA (texte). 



Prenons par exemple un fichier XML tire du site www.accesites.com. 

<?xml version=' 1.0' encodi ng= ' ISO-8859-1 ' ?> 

<?xml -styl esheet type="text/xsl" href="i ndex.xsl "?> 

<!D0CTYPE index SYSTEM "index. dtd"> 

<page> 

<paragraphexgras>Vous voulez un site sans surprise, 
tout compris, realise dans de moindres delais, simple a 
mettre a jour en toute independance ?</grasx/paragraphe> 

<paragraphexorange>Nos packs sont faits pour vous.</orange> 
</paragraphe> 



Double Poche CSS • 785 



9 



Les CSS se marient bien 



<paragraphe> Beneficiez de notre <gras>savoi r-fai re</gras> 
dans un site a <gras>vos coul eurs</gras>.</paragraphe> 



<paragraphe> Vos clients et vos prospects feront une agreable 
visite sur votre espace grace a une navigation simple et 
di recte.</paragraphe> <paragraphe> Si vous desirez une 
presence encore plus personnal i see nous pouvons concevoir 
votre site <gras>"sur mesure"</gras> sur simple devis gratuit. 
</paragraphe> 



<paragraphe>Quel que soit votre choix, un grand nombre 
d'<gras>options</gras> et de services adaptes a vos besoins, 
sont a votre disposition.</paragraphe> 

</page> 

Remarquez les balises imbriquees. Les donnees paragraphe contiennent 
parfois les balises orange ou gras, mais aussi du texte. 



EN AcceSitm - Nctocapr fc 



fiLh-ir- [Ji>.- MQAM c ^.(ie:.r'r' 0 L'IJ't*.; "•iN:; ^Cf 

4_ 



3 



9CH 



Vous etes sur le Web 





11 a voire Meotttan 



A Figure 9.42 : Accesites.com 
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Voici la DTD : 

<?xm1 version="1.0" encoding="IS0-8859-l"?> 
<! ELEMENT page (paragraphe+)> 
<!ELEMENT paragraphe (gras*,orange*)> 
<! ELEMENT gras (#PCDATA)> 
<! ELEMENT orange (#PCDATA)> 

L'element page contient un ou plusieurs elements paragraphe. L'ele- 
ment paragraphe, lui, contient aucun ou plusieurs elements gras et 
orange. Les elements gras et orange sont des donnees traitees par le 
processeur XSLT. 

LeXSLT 

Le XSLT est un langage de type XML, qui utilise la syntaxe et la 
semantique d'un autre langage nomme XPath. Tout cela forme un vrai 
langage de programmation, qui permet de creer des processus de grande 
complexite. 

L'espace de nommage 

II s'agit d'une sorte d'en-tete du fichier. II contient le type d'encodage des 
caracteres (ici les caracteres d'Europe occidentale) et la version de XML 
(en ce moment, la 1.0). 

<?xml version="1.0" encoding="IS0-8859-l"?> 
<xsl : styl esheet 

xml ns:xsl =" http://www.w3.org/1999/XSL/Transform" 
version="1.0"> 

La declaration xml ns (XML name space) a un attribut qui ressemble a une 
URL, mais en fait, c'est juste une convention qui designe le type de 
nommage qui sera utilise. 

La feuille de style 

La feuille de style est contenue entre les balises <xsl : styl esheet...> et 
</xsl :stylesheet> dans laquelle vous pouvez declarer les differents 
modeles en commengant par le modele de la racine. Ce modele represente 
la forme generale de la page. Ainsi, vous y mettrez votre charte 
graphique : le logo, la barre de menus, etc. tout ce qui enveloppe les 
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donnees. Vous partez d'un fichier HTML que vous normalisez en 
XHTML. Vous convertissez alors les balises <br> en <br /> selon les 
regies enoncees plus haut. Ensuite vous caracterisez le HTML comme 
etant : 

<html lang="fr" xml : 1 ang="f r" xmlns="http://www. w3.org/1999/xhtml "> 

Le fichier HTML original peut contenir des caracteres que vous ne voulez 
pas soumettre au traitement XSLT, par exemple votre code JavaScript 
dans Fen-tete. Dans ce cas, il faut Fintroduire dans la balise 
<! [CDATA [...]]>. 

<script 1 anguage="JavaScript"xxsl :comment><! [CDATA[ 
function MM_prel oadlmages () { //v3.0 

var d=document; if (d. images) { 
if(!d.MM_p) d.MM_p=new ArrayO; 

var i , j =d . MM_p . 1 engt h , a=MM_prel oadlmages . arguments ; 
for(i=0; i<a. length; i++) 

if (a[i] .indexOf ("#") !=0) { d.MM_p[j]=new Image; d.MM_p[j++] 
.src=a[i] ;}} 
} 

]]></xsl :comment> 
</script> 

Cela n'empeche pas d'utiliser aussi des feuilles de style dans le document 
resultat. 

<link rel ="styl esheet" href="accesites.css" type="text/css"/> 

Les modeles (templates) 

Votre modele est encadre par les balises <xsl : tempi ate> et </xsl : tem- 
pi ate>. L'attribut match designe l'element qui correspond au modele 
dans le fichier XML : 

<xsl :template match="/"> 

Ici le caractere / designe l'element racine. 

Vous introduisez votre code entre les balises. A l'endroit ou vous devez 
introduire des donnees XML qui sont sous l'arborescence du modele 
courant, vous appelez le modele qui leur correspond (match) soit par son 
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nom de balise, soit par un terme generique. Voici un exemple expurge de 
nombreuses lignes de code JavaScript et HTML car ici seul le code XSLT 
nous interesse. Dans le fichier complet, l'appel au modele de l'element 
paragraphe est insere dans un tableau HTML. 

<?xm1 version="1.0" encoding="IS0-8859-l"?> 
<xsl : styl esheet xmlns:xsl 

="http://www. w3.org/1999/XSL/Transform" version="1.0"> 

<xsl:output method="html " encoding="IS0-8859-l"/> 

<xsl : tempi ate match="/"> 

<html lang="fr" xml : 1 ang="f r" 

xml ns="h ttp: //www. w3.org/1999/xhtml "> 

<head> 

<ti tl e>AcceSi tes</ti tl e> 
<meta http-equi v=" Con tent-Type" 
content="text/html ; charset=i so-8859-l"/> 

<script language="JavaScript"xxsl :comment><! [CDATA[ 
function MM_prel oadlmages () { //v3.0 

var d=document; i f(d. images) { 
if(!d.MM_p) d.MM_p=new ArrayO; 

var i , j =d . MM_p . 1 ength , a=MM_prel oadlmages . arguments ; 
for(i=0; i<a. length; i++) 

if (a[i].indexOf("#")!=0){ d.MM_p[j] 
=new Image; d.MM_p[j++] 
.src=a[i] ;}} 
} 

]]></xsl :comment> 
</script> 

<link rel="stylesheet" href="accessites.css" type="text/css"/> 
</head> 

<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" 
topmargi n="0" marginwidth="0" marginheight="0" 
onl_oad="MM_prel oadlmages ( ' i mages/bout pack_over.gi f ' , 
' images/bout opt ion_over.gif , 1 i mages/bout command_over. gi f ' , 
1 images/boutcontact_over.gi f 1 , 1 images/boutmarche_on.gi f 1 , 
1 images/bout devi s_on.gi f ' ) "> 

<xsl :apply-templates select="page/paragraphe"/> 

</body> 
</html> 

</xsl : tempi ate> 
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Ensuite nous ajoutons les modeles des differents elements : 

<xsl :template match="paragraphe"> 

<p cl ass="courant"> 
<xsl :apply-templates/> 

</p> 

</xsl :template> 

Ici il s'agit d'un paragraphe. Nous utilisons done les balises <p> et </p>. 
<xsl : apply-templ ates/> est une commande generique qui evite de 
nommer chaque modele a appeler et qui appelle done le contenu du 
paragraphe, dont les contenus gras et orange, en verifiant leur modele. 

<xsl : tempi ate match="gras"> 
<bxxsl : val ue-of sel ect=" . "/></b> 

</xsl :template> 

<xsl : tempi ate match="orange"> 
<p class="sstitre"xxsl :value-of sel ect=" . "/></p> 

</xsl :template> 

La commande <xsl : val ue-of select="."/> represente la valeur de 
F element courant. On aurait pu aussi nommer chaque element. 

Comme vous pouvez le constater, nous pouvons envisager la structure de 
donnees d'un fichier XML comme une arborescence ou une imbrication 
de donnees de type "poupees russes". C'est un langage declaratif fonde sur 
des modeles. 

Dans l'exemple, nous voyons que dans un document XSLT qui obeit au 
format XML, qui est strict, il est toutefois possible d'integrer du 
JavaScript, qui lui n' obeit pas aux regies du XSLT. II est alors donne en 
commentaire. 

Notre ouvrage n'est pas un livre sur le langage XML. II s'agit done la 
d'une introduction pour vous aider a aborder ce langage a travers des 
exemples pratiques. 

Le XSLT et les CSS 

Le fichier XSLT est un fichier XHTML avec, en plus, une DTD differente 
et des commandes XPath. II est done possible d'y glisser un lien vers une 
feuille de style. 
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La feuille de style en cascade est assez simple. 



.courant { 

font-family: "Arial", 
font-size: 14px; 
color: #4087C1 


"Hel veti ca" , 


"sans- 


•serif"; 


} 

.sstitre { 

font-family: "Arial", 
font-size: 16px; 
color: #FF9999; 
font-weight: bold 


"Hel veti ca" , 


"sans- 


■serif"; 


} 

.titre { 

font-family: "Arial", 
font-size: 24px; 
color: #4087C1; 
font-weight: bold 
} 


"Hel veti ca" , 


"sans- 


■serif"; 


.titre orange { 
font-family: "Arial", 
font-size: 24px; 
color: #FF9999; 
font-weight: bold 
} 


"Hel veti ca" , 


"sans- 


■serif"; 



Elle porte surtout sur les caracteristiques de certains caracteres. II est 
possible de creer les balises a volonte, a condition de les inscrire dans la 
DTD. 



Le fichier PHP 

Le fichier PHP appelle les differents fichiers qu'il envoie vers les API pour 
qu'ils soient traites en vue d'un fichier resultat. Voici un exemple de code : 



$xslt=xslt createO; 




$resultat=xslt process ($xsl t, 'index.xml 1 , 


1 index. xsl ' ) ; 


echo $resultat; 




xslt free($xslt) ; 





Le programme cree un analyseur XSLT par la fonction xslt_create(), 
puis il cree, avec 1' analyseur, le fichier XML et le fichier XSLT, un fichier 
resultat qui sera affiche ici a l'ecran avant d'etre efface de la memoire du 
serveur. Cette fonction a trois arguments supplementaires optionnels, qui 
permettent de passer des parametres au processeur (ici Sablotron) : 
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■ Le premier argument est le nom du fichier resultat, si vous voulez 
conserver ce resultat dans un fichier. Si vous ne Futilisez pas mais que 
vous utilisiez les arguments suivants, il faut mettre null pour signaler 
son absence. 

■ Le deuxieme argument est un tableau d'arguments qui, pour l'instant, 
est reserve aux versions prochaines de Sablotron. 

■ Le troisieme est un tableau de parametres pour le processeur XSLT, 
comme des parametres de pagination. 

Avant de lancer l'analyseur XSLT, le fichier PHP peut proceder a des 
operations. Tous ces fichiers se marient harmonieusement en se comple- 
tant. PHP apporte sa richesse de fonctions et sa puissance, XML structure 
les donnees et les rend simples a mettre a jour, y compris par des 
non-specialistes, XSLT ajoute une grande diversite de formats du meme 
document (fichier HTML, fichier CSV...). 

9.4 Conclusion 

Le Web est vraiment le carrefour de toutes les technologies. De plus en 
plus, l'architecture du Web est utilisee pour les applications a l'interieur 
des entreprises. Dans cette architecture, les CSS resteront un element 
important par leur simplicity de conception. Les navigateurs se normali- 
seront, sous peine de devenir marginaux, et les CSS donneront alors toute 
leur puissance et deploieront toutes leurs potentialites. 
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Voici quelques sites autour des technologies evoquees dans ce livre. 

10.1 CSS 

Cette liste n'est pas exhaustive. Cependant, vous rendrez regulierement 
visite aux sites qui suivent si vous vous interessez aux CSS. 

Yoyodesign 

Le Web est riche sur ce sujet. La somme de travail sur certains sites est 
stupefiante. La documentation est d'abord basee sur les pages du W3C 
traduites par J. J. Solari et mises en ligne sur www. yoyodesign 
.org/doc/w3c/css2/cover.htm1 . 

Openweb 

Un certain nombre de sites sont incontournables par le travail effectue 
autour des CSS comme http://openweb.eu.org/css. Ce site est 
remarquable, autant pour son interface que pour ses articles sur les 
technologies web. 

La communication est bien pensee pour satisfaire tout visiteur. 



Consultez ce site selon votre profil 
Expert Debutant Decideur Gourou 



▲ Figure 10.1 : Communication d' Openweb 

Openweb est tenu par un areopage de specialistes coordonnes par Tristan 
Nitot. 

Pompage 

Le site Pompage Magazine (http : / / pompage . net) est resolument tourne 
vers les CSS. II ouvre au public des textes importants traduits de l'anglais. 
II est beau et elegant. 

Alsacreations 

Le site Alsacreations (www.alsacreations.fr), de Raphael Goetter, est 
incontournable, aussi bien pour ses tutoriaux sur les CSS et les normes du 
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W3C, que pour son forum, tres actif. II aborde aussi les themes suivants : 
accessibilite, PHP, JavaScript, etc. 

Mediabox 

Mediabox (http://wiki.media-box.net/documentation/css) est un 
autre site qui propose un tutorial bien fait sur les CSS. 

CSS Zen Garden 

II existe une traduction francaise du site CSS Zen Garden qui est le must en 
matiere d'experimentation CSS (www.csszengarden.com/tr/francais). 

Self HTML 

http://fr.sel f html .org/css est un autre site tres complet. C'est une 
traduction realisee par Serge Francois du site original, qui est en allemand. 
SelfHTML explique en detail les CSS et aussi les autres technologies du 
Web. 

10.2 XHTML 

La grange 

Le site phare est www.la-grange.net/w3c/xhtmll/. II propose la 
traduction realisee par Karl Dubost des recommandations du W3C. La 
plupart des sites deja mentionnes abordent ce sujet car le XHTML et le 
CSS sont intimement lies. 

All HTML 

Le site All HTML (www . al 1 html . com/xhtml /) est tres complet puisqu'il 
aborde toutes les technologies et developpe deux tutoriaux sur ce sujet. 

Fusa2 

http://fusa2.free.fr/Webmaster/xhtml.htm offre de bonnes pages 
sur le XHTML. 
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Une reformulation de HTML 4 en XML 1 .0 








Recommandation W3C 26 Janvier 2000 








Cette version : 

http://www.w3.orgrTR/2000/REC-xhtrnl1-20000126 

(version Postscript, version PDF. archive ZIP, ou archive TAR qzippei 
Deiniere version : 

http://www.w3 org/TR/xhtmll 
Version precedente : 

http://www.w3.orq/TR/1999/PR-iditml1-19991210 
Auteurs : 

Voir remerciements. 


- 











a Figure 10.2 : XHTML 

L'Altruiste 

Le site L'Altruiste (http://www. 1 al truiste.com), tres complet, aborde 
toutes les technologies et propose un panorama du XHTML. 



10.3 Accessibility 

Accessiweb 

L'accessibilite est abordee par la purpart des sites deja cites. Le site phare 
est Accessiweb (www.accessiweb.org). II tres complet sur le sujet. 

La-grange.net 

Ce site (www.la-grange.net/accessibilite/), tres complet et deja 
mentionne, propose de faire le tour de l'accessibilite en trente jours. 
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A-B-C 



Abbr 66 1, 668 

Absolu 627, 639, 700 

Absolute 6 19, 621 

Accessibilite 654, 670 

Accesskey 594, 671 

Acronym 601, 668 

ActiveBorder, ActiveCaption 509 

Affectation 723 

Aide 674 

Alerte 741 

Alignement 496, 663 

Alinea 496 

Alpha 556 

Alt 582, 668 

Apostrophe 772 

AppWorkspace 509 

Arborescence 463 

Argument 722, 731, 744 

Arriere-plan 510 

Ascenseur 538, 588, 595 

Attribut 782 

Back-office 682 

Background 505, 509-512, 709 

Balance des blancs 504 

Bande passante 538 

Banniere 470 

Barre de navigation 464 

Baseline 496 

Bloc 618 

Boite 575, 579, 585, 597, 618, 620, 704 

Boite flottante 553, 597 

Booleen 774-775 

Bottom 497 

Boucle 726 

Br 788 

Braille 557 



Break 729, 743 

ButtonFace, ButtonHighlight, ButtonText . 509 

Caption, CaptionText 509, 661 

Carte 462 

Cartouche 609 

Case 743 

CDATA 785 

CFT 502 

Chaine de caracteres 776 

Chapeau 548, 552 

Charset 668 

Charte graphique 452 

Chroma 557 

Classe 529 

Clear 597, 634 

CMJN 503 

Code decimal / hexadecimal 506 

Coherence 514 

Coin arrondi 642, 699, 706 

Colgroup 663 

Color 505, 546 

Color Schemer 467, 505 

ColorZilla, Colourificator 466 

Commentaire 562, 736, 741 

Communication 474, 479 

Compact 525 

Compteur 751 

Conforme 608 

Constructeur 733 

Content 554, 562 

Contenu semantique 463 

Continue 729 

Cookie 745, 750, 752 

Couleurs 439, 470, 502, 540 

Critere de nommage 773 

CSS, CSS3 701, 788 



D-E-F 



Dashed 546 

Date 732, 745 

Decimal 492, 508 

Declaration 525, 537, 723 

Defer 525 

Design 452, 455 

Disabled 525 

Display 500, 619, 763 

Display_model 704 

Div 471 

DOCTYPE 525, 656 

Document. cookie 752 

Documentation 471 

DOM 532 

Domain 746 

Dpi 494 



DTD 525, 782, 785 

E-mail 719 

EasyPHP 769 

Echappement 562, 748 

EclipsePalette 467 

Era 492, 494 

Emulateur 477 

Encapsulation 745, 751 

Entier 774 

Espace de nommage 781, 787 

Evenement 716, 731 

Expires 746 

FAQ 454, 554, 674 

Favicon.ico 514 

Feuille de style 471 

Fieldset 659 
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Filtre 555, 606 

First-child 548 

First-letter 553 

Fixed 595, 619, 625 

Float 632, 774-775 

Flottant 500, 639, 700 



Flux 471, 500 

Fonction 722, 731 

Font-family, Font-size, etc 491, 709 

For 660, 730 

Formulaire 542, 659 

Function 731 



G-H 



Generateurs de metatags 483 

GetElementByld, GetElementBy etc 758 

GetMonth(),GetTime() 726, 747 

Glissiere 539 

Goat 709 

Habillage 538 

Handheld 558 



Headers 661 

Heritage 474, 531 

Hierarchie 513 

Highlight, HighlightText 509 

History.goO 719 

Hr 567, 599 

HSL, HSLA 707-708 



l-J-L 



IconArt 468 

Id 660 

Identifiant 472 

Identification de la page 513 

Identite eraphique 514 

If 726, 743 

Illustration 498 

Image de fond 615 

©import 558-559 

Imprimer 718 

In 492 

InactiveB order, InactiveCaption 509 

Incrementation 728 



IndexOfQ 749 

InfoBackground, InfoText 509 

Inset 546 

Instance 732 

Int, Integer 774 

Ismap 525 

lava, JavaScript, JScript 605, 712, 734 

Label 660 

Lang 536-537, 657 

Langue 479, 535 

Lettrine 553 

Lien 438, 479, 485, 513, 517, 534, 658 

Liste 529, 546, 664 



M-N-0 



Marge externe / interne 565, 630, 638 

Master Styler 465 

Match 788 

Math 738 

Media 557 

Menu 545, 575, 585 

MenuText 509 

Meta 481, 668 

Min-height, Min-width 563, 638 

Mise en page 436, 488 

Mmenu 509 

Modele 788 

Monospace 490 

Moteur de recherche 479, 5 1 8 

Motif 560 

Mots-cles 463, 481-483, 494, 506 



Navigation 513, 669 

NewO 732 

Norn 733, 745 

Nombre a virgule flottante 775 

Non-motif 560 

Noresize, Noshade, Nowrap 512, 525 

Null 775 

Objet 731 

OnClick 741 

OnSubmit 748 

Opacite 556 

Operateur ternaire 743-744 

Opquast 590-591 

Ordre de lecture 673 

Outset 546 

Overflow 566, 623 
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P-R-S 



Padding 564-565, 599, 6 13, 630 

Paragraphe 495 

ParselntO 739 

Path 746 

PCDATA 785 

Petite capitale 553 

Pica, pixel 492, 494 

Positionnement 481 

Pourcentage 494, 507 

Print 558-559 

Progressive rendering 709 

PromptO 739, 749 

Pseudo-classe 549-550 

Public 461 

Puce 666 

Random!) 738 

Regies typographiques 489 

Repeat, Repeat-x, Repeat-y 512 

Resolution 440, 737 

Resume 463 

Return 731 



RGB, RGBA . 

Robot 

Screen 

Scrollbar . . . . 



502, 708 

484, 679, 719 

558, 731 

509, 539 



Secure 746 

Select 545 

Selecteur 526, 534, 562 

SetAttributeO 759 

Smartpixel 541 

Son 708 



Sondage 

Spam 

Split! i 

Static 

String 

Structure d'une page 
Sub 



679 

719 

738 

619 

774, 776 

445 

496 



Submit 542 

Super 497 

Surcharge 474 

Switch 743 



T-U-V 



Table 577, 663 

Tableau 661, 724 

Taille absolue/relative 491 

Tbody 663 

Temperature de couleur 504 

Template 702. 788 

Temps GMT 747 

Text-bottom, Text-indent, Text-top . . . 496-497 

Tfoot, Th, Thead 661, 663 

Theme 455 

This 733 

ThreeDDarkshadow, ThreeDFace, etc 509 



Title 479, 668 

Touche d'acces 671 

Transparency 708 

TSL 707 

TTY 558 

Tv 558 

Type 723 

Typographic 455, 579 

UnescapeQ 748, 754 

Validation 475 

Variable 723, 773 



w-x-z 

WCAG 590 XHTML . . . 471, 520, 526, 586, 590, 601, 788 

Web Developer 469. 570 XML 658, 779 

Window, WindowFrame, WindowText .... 509 XSLT 779, 787 

Window.prompt() 738 Z-index 
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